AJAX बूटस्ट्रैप-चयन

के साथ काम नहीं करता है मुझे flask-jquery-ajax example मिला जहां उपयोगकर्ता वाहन "मेक" ड्रॉप डाउन मेनू से कोई आइटम चुनता है, वाहन "मॉडल" ड्रॉप डाउन मेनू मॉडलों की सूची के लिए AJAX अनुरोध करके पॉप्युलेट किया जाता है चयन करने के लिए।AJAX बूटस्ट्रैप-चयन

मैं द्वारा ड्रॉप-डाउन मेनू को बदलने के लिए करने की कोशिश की बूटस्ट्रैप का चयन और जैसे ही मैंने वर्ग = "selectpicker प्रपत्र नियंत्रण" दूसरे ड्रॉप-डाउन मेनू में किसी भी अधिक के बाद आबादी नहीं मिलता है शामिल पहला ड्रॉप-डाउन चुना गया है।

इस 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>

यह जावा स्क्रिप्ट code ड्रॉप-डाउन मेनू को आबाद करने के लिए जिम्मेदार है:

$("#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]) 
      ); 
     } 
    }); 
});

क्यों वर्ग = "selectpicker प्रपत्र नियंत्रण" करता है बूटस्ट्रैप- से चुनें कि दूसरा ड्रॉप-डाउन मेनू अब और अधिक नहीं आ गया है?

स्रोत

2014-10-04 user977828

AJAX के बाद किया जाता है, आप प्लगइन को फिर से लोड करने की आवश्यकता है:

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

या

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

स्रोत

2014-10-08 23:20:24

बिल्कुल सही जवाब .. ऊपर अंगूठे !! – Gags

धन्यवाद, फ्रेड वूर्जस! :-) – vkm

लेकिन यह 10, 11, https://stackoverflow.com/questions/28879182/bootstrap-select-drop-list-moves-down-ward-automatically काम नहीं करता है –

AJAX बूटस्ट्रैप-चयन

उत्तर

संबंधित मुद्दे