A잭스가 bootstrap-select와 함께 작동하지 않음
Flask-jquery-ajax 예제를 찾았습니다. 사용자가 차량 "제조" 드롭다운 메뉴에서 항목을 선택하고 차량 "모델" 드롭다운 메뉴는 선택한 제조업체의 모델 목록을 AJAX에 요청하여 채워집니다.
bootstrap-select로 드롭다운 메뉴를 바꾸려고 했는데 두 번째 드롭다운 메뉴에 class="selectpicker form-control"을 포함하자마자 첫 번째 드롭다운이 선택된 후 더 이상 채워지지 않습니다.
다음은 HTML 템플릿입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flask Jquery AJAX Drop Down Menu Example</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
<link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<h1>Select Vehicle</h1>
<form class="form-horizontal" action="/" method="POST" >
<div class="input-group">
<span class="input-group-addon">Make:</span>
{{ form.make(id="make_select", class="selectpicker form-control") }}
</div>
<div class="input-group">
<span class="input-group-addon">Model:</span>
{{ form.model(id="model_select", class="selectpicker form-control") }}
</div>
<button type="submit">Submit</button>
</form>
{% if chosen_make %}
<h2>You selected:</h2>
<ul>
<li>Make ID: {{ chosen_make }}</li>
<li>Model ID: {{ chosen_model }}</li>
</ul>
{% endif %}
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script>
$('.selectpicker').selectpicker();
</script>
<script src="/assets/vehicle.js"></script>
</body>
</html>
다음은 드롭다운 메뉴를 채우는 자바스크립트 코드입니다.
$("#make_select").change(function() {
var make_id = $(this).find(":selected").val();
var request = $.ajax({
type: 'GET',
url: '/models/' + make_id + '/',
});
request.done(function(data){
var option_list = [["", "--- Select One ---"]].concat(data);
$("#model_select").empty();
for (var i = 0; i < option_list.length; i++) {
$("#model_select").append(
$("<option></option>").attr(
"value", option_list[i][0]).text(option_list[i][1])
);
}
});
});
bootstrap-select의 class="selectpicker form-control"이 두 번째 드롭다운 메뉴를 더 이상 채우지 않는 이유는 무엇입니까?
AJAX가 완료되면 플러그인을 다시 로드해야 합니다.
$('#model_select').selectpicker('refresh');
또는
success: function(data)
{
$("#model_select").html(data).selectpicker('refresh');
}
언급URL : https://stackoverflow.com/questions/26191920/ajax-does-not-work-with-bootstrap-select
'programing' 카테고리의 다른 글
| 다른 테이블의 데이터로 mysql 테이블 업데이트 (0) | 2023.09.02 |
|---|---|
| MySQL 점 유형의 좌표 검색 (0) | 2023.09.02 |
| 오라클 SQL Developer를 사용하여 텍스트 파일로 CLOB 내보내기 (0) | 2023.09.02 |
| SQL - 각 레코드에 대한 Call Stored Procedure (0) | 2023.09.02 |
| 수직 중심화 부트스트랩 모달 창 (0) | 2023.09.02 |