11
Tôi tìm thấy flask-jquery-ajax example nơi người dùng chọn một mục từ menu thả xuống "Thực hiện", menu thả xuống "Mô hình" được điền bằng cách tạo yêu cầu AJAX cho danh sách mô hình cho việc lựa chọn.AJax không hoạt động với bootstrap-chọn
tôi đã cố gắng để thay thế các trình đơn thả xuống bởi bootstrap-chọn và ngay sau khi tôi bao gồm class = "selectpicker hình thức kiểm soát" trong trình đơn thả xuống thứ hai nó không nhận được bất kỳ hơn dân cư sau menu thả xuống đầu tiên đã được chọn.
Đây là mẫu 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>
Đây là hoạt Javascript code chịu trách nhiệm về Populating các trình đơn thả xuống:
$("#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])
);
}
});
});
Tại sao class = "selectpicker hình thức kiểm soát" từ bootstrap-select khiến menu thả xuống thứ hai không còn được điền?
Perfect Answer .. thumbs up !! – Gags
Cảm ơn bạn, Fred Wuerges! :-) – vkm
nhưng không hoạt động trong 10, 11, https://stackoverflow.com/questions/28879182/bootstrap-select-drop-list-moves-down-ward-automatically –