user977828 user977828 - 4 months ago 10x
jQuery Question

AJax does not work with bootstrap-select

I found flask-jquery-ajax example where the user selects an item from the vehicle "Make" drop down menu, the vehicle "Model" drop down menu is populated by making an AJAX request for a list of models for the make selected.

I tried to replace the drop-down menus by bootstrap-select and as soon as I include class="selectpicker form-control" in the second drop-down menu it does not get any more populated after the first drop-down has been chosen.

This is the HTML template:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Flask Jquery AJAX Drop Down Menu Example</title>

<link rel="stylesheet" type="text/css" href="//" >
<link rel="stylesheet" type="text/css" href=//>
<link rel="stylesheet" href="{{ url_for('static', filename='web.css') }}">

<!-- Custom styles for this template -->
<link href="" rel="stylesheet">
<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 class="input-group">
<span class="input-group-addon">Model:</span>
{{ form.model(id="model_select", class="selectpicker form-control") }}
<button type="submit">Submit</button>

{% if chosen_make %}
<h2>You selected:</h2>
<li>Make ID: {{ chosen_make }}</li>
<li>Model ID: {{ chosen_model }}</li>
{% endif %}

<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
<script src="/assets/vehicle.js"></script>

This is the JavaScript code responsible for populating the drop-down menus:

$("#make_select").change(function() {
var make_id = $(this).find(":selected").val();
var request = $.ajax({
type: 'GET',
url: '/models/' + make_id + '/',
var option_list = [["", "--- Select One ---"]].concat(data);

for (var i = 0; i < option_list.length; i++) {
"value", option_list[i][0]).text(option_list[i][1])

Why does class="selectpicker form-control" from bootstrap-select cause that the second drop-down menu get not anymore populated?


After AJAX is done, you need to reload the plugin: