我找到了flask-jquery-ajax示例,其中用户从车辆"Make"下拉菜单中选择项目,通过对所选择的make的模型列表进行AJAX请求来填充车辆"Model"下拉菜单.
我试图通过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 …我有一个与this和this类似的问题。我已经尝试了评论中描述的所有解决方案。并达到了它可以工作的程度。
我的问题，当我从#main_cat内容中选择一个选项时.sub_cat是第一次加载（AJAX 加载正确）。但是如果我从#main_cat加载的内容中选择另一个选项但不使用选择选择器样式。它只是显示：
glyphicon-sort-by-alphabetOPTION 1 （以下截图）
HTML
<select id="main_cat" name="main_cat" class="selectpicker">
<option selected="-1">Kies een thema</option>
<option value="Actief_Avontuur" data-name="Actie & avontuur" data-icon="glyphicon-sort-by-alphabet" class="special"> Actief, sportief en avontuurlijk</option>
<option value="Creatief" data-name="Creatief" data-icon="glyphicon-sort-by-alphabet-alt" class="special"> Creatief</option>
</select>
<select name="sub_cat" disabled="disabled" class="selectpicker_1 sub_cat">
jQuery
$(function(){
$('#main_cat').change(function(){
var $option = $(this).find('option:selected'),
id = $option.val(),
name = $option.data('name');
// open your browser's console log and ensure that you get the correct values
console.log(id, name);
$(".sub_cat").empty();
// call ajax
$.ajax({ …