AJax 不适用于 bootstrap-select [英] AJax does not work with bootstrap-select

查看：40
本文介绍了AJax 不适用于 bootstrap-select的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我发现 flask-jquery-ajax 示例，其中用户从车辆中选择了一个项目制作" 下拉菜单，车辆模型"下拉菜单通过对所选品牌的模型列表发出 AJAX 请求来填充.

我尝试用 bootstrap-select 替换下拉菜单，并在第二个下拉菜单中包含 class="selectpicker form-control"选择第一个下拉菜单后，它不再填充.

这是 HTML 模板:

<html lang="zh-cn"><头><meta charset="utf-8"><title>Flask Jquery AJAX 下拉菜单示例</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') }}"><!-- 此模板的自定义样式--><link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet"><身体><h1>选择车辆</h1><form class="form-horizo​​ntal" action="/" method="POST" ><div class="input-group"><span class="input-group-addon">制作:</span>{{ form.make(id="make_select", class="selectpicker form-control") }}

<div class="input-group"><span class="input-group-addon">模型:</span>{{ form.model(id="model_select", class="selectpicker form-control") }}

<button type="submit">提交</button></表单>{% if selected_make %}<h2>您选择了:</h2><ul><li>制作 ID:{{ selected_make }}</li><li>模型 ID:{{ selected_model }}</li>{％ 万一 ％}<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><脚本>$('.selectpicker').selectpicker();<script src="/assets/vehicle.js"></script>

这是 JavaScript 代码填充下拉菜单:

$("#make_select").change(function() {var make_id = $(this).find(":selected").val();var 请求 = $.ajax({类型:'获取'，url: '/models/' + make_id + '/',});request.done(功能(数据){var option_list = [["", "--- Select One ---"]].concat(data);$("#model_select").empty();for (var i = 0; i < option_list.length; i++) {$("#model_select").append($("").attr("值", option_list[i][0]).text(option_list[i][1]));}});});

为什么 bootstrap-select 中的 class="selectpicker form-control" 导致第二个下拉菜单不再填充?

解决方案

AJAX完成后，需要重新加载插件:

$('#model_select').selectpicker('refresh');

或 

成功:函数(数据){$("#model_select").html(data).selectpicker('refresh');}

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">
<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>

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 + '/',
    });
    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])
            );
        }
    });
});

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:

$('#model_select').selectpicker('refresh');

or 

success: function(data)
{
  $("#model_select").html(data).selectpicker('refresh');
}

这篇关于AJax 不适用于 bootstrap-select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆