AJax, önyükleme seçimli

ile çalışmaz flask-jquery-ajax example numarasını buldum. Kullanıcı "Make" araç menüsünden bir öğe seçtiğinde, araç "Model" açılır menüsü, bir model listesi için AJAX isteğinde bulunarak doldurulur make için seçildi. AJax, önyükleme seçimli

Ben tarafından açılır menüleri değiştirmek çalıştı en kısa sürede bir daha sonra doldurulan almaz ikinci açılır menüden class = "selectpicker form kontrolü" dahil olarak önyükleme seçim ve İlk açılan menü seçildi.

HTML şablon:

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

Bu açılır menüler doldurma sorumlu JavaScript code geçerli:

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

Neden class = "selectpicker form kontrol" yapar önyükleme seçimli, ikinci açılır menünün artık kayıtlı olmamasına neden oluyor? AJAX sonra

kaynak

2014-10-04 user977828

yapılır, eklentiyi yeniden yüklemeniz gerekir: yukarı

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

veya

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

kaynak

2014-10-08 23:20:24

Mükemmel Cevap .. başparmak !! – Gags

Teşekkür ederim, Fred Wuerges! :-) – vkm

fakat 10, 11, https://stackoverflow.com/questions/28879182/bootstrap-select-drop-list-moves-down-ward-automatically adresinde çalışmıyor. –

AJax, önyükleme seçimli

cevap

İlgili konular