Jqueryはすべての選択オプションを削除します - 期待どおりに機能しません

Question

私はこれに対する解決法を読んだことがありますが、なんらかの理由でそれを動作させることはできません。 これをコンテキストにするには、2つのドロップダウンがあり、1つのオプションが選択されている場合は、2番目のドロップダウンでオプションを削除し、最初のドロップダウンに関連するデータでリロードします。私は実際に帆を使用していますので、下記の生のコードが含まれます

が、しかし、私はまた、私はどちらかの作業それを得るカント静的コンテンツとJSFiddleを作成し、これはここで見つけることができます：

ドロップダウンページ

<div class="form-group" id="chainDrop"> 
    <label for="restaurantChain">What chain does it belong to?</label> 
    <select class="form-control selectpicker" id="restaurantChain" name="restaurantChain" data-live-search="true" onchange="loadRestaurants()"> 
    <% if(typeof chains != "undefined") { %> 
     <% _.each(chains, function(chain){ %> 
     <option value="<%= chain.id %>"> 
      <%= chain.name %> 
     </option> 
     <% }) %> 
      <% } %> 
    </select> 



    <p >The below will override the chain selection, and add items unique to the below restaurant in the chain</p> 
    <div class="form-group"> 
    <label> 
     <input type="checkbox" name="checkboxes" id="checkboxes-specific"> Add menu items to individual restaurants 
    </label> 
    </div> 


    <div class="form-group" id="specific"> 
    <label for="individualRestaurant">Restaurant Name(Chain Override)</label> 
    <select class="form-control selectpicker" id="individualRestaurant" name="individualRestaurant" data-live-search="true"> 
     <% if(restaurants) { %> 
     <% _.each(restaurants, function(restaurant){ %> 
      <% if(restaurant.chain) { %> 
      <option value="<%= restaurant.id %>"> 
       <%= restaurant.name %>, <%= restaurant.location %> 
      </option> 
      <% } %> 
      <% }) %> 
     <% } %> 
    </select> 
    </div> 
</div> 

機能

function loadRestaurants() { 
    var editSpecific = $('#checkboxes-specific').is(':checked'); 

    if(editSpecific){ 
    $('#individualRestaurant').find('option').remove().end(); 
    } 
} 

、10

は、私は、関数が実行され、それがあることをテストしてみたが、私はこれがそれに影響を与えている場合、なぜjQueryの

更新

イムわからないが動作していないのと困惑しますしかし、私はまた、あなたが見ることができるようにdivを

$(function() { 
    $('[name="checkboxes"]').on('change', function() { 
    $('#independantDrop').toggle($('#checkboxes-isindependant').is(':checked')); 
    $('#chainDrop').toggle($('#checkboxes-ischain').is(':checked')); 
    $('#specific').toggle($('#checkboxes-specific').is(':checked')); 
    }).trigger('change'); 
}); 

の表示を切り替えるためにjqueryの機能を使用しています、皮革上記のコードでは、私のチェックボックスは/ specificのdivの隠蔽を解除します。私はまた、上記のすべての私のコードは/私はセレクタをテストするために私の関数に以下のコードをも追加されている多くの

を隠蔽を解除する隠す前に、チェックボックスのチェックをしている：結果は

var select = $('#individualRestaurant'); 
    console.log(select); 

：

[select#individualRestaurant.form-control.selectpicker, context: document, selector: "#individualRestaurant"] 

この根本的な原因は、私はそれを使用していて、それが私のドロップダウンを変更しているように見えます

更新＃2

にS： https://silviomoreto.github.io/bootstrap-select/

次のコードが動作するようになりました：

$('#restaurantChain').on('hidden.bs.select', function (e) { 
    console.log('test'); 
    $('#individualRestaurant').find('[id=restaurantId]').remove(); 
    $('#individualRestaurant').selectpicker('refresh'); 
}); 

Answer 1

良い仕事jsfiddleを含むため。私は問題がルートスコープにloadrestaurants関数を入れていないと思う。あなたのフィドルでは、それは "負荷"機能にあります。

Answer 2

上記のコードは正しく動作しています。あなたは完全に空のドロップダウンを設定したい場合は、可能性、

Javascriptのブラウザのコンソールで、コードの下に

function loadRestaurants() { 
    var editSpecific = $('#checkboxes-specific').is(':checked'); 
    console.log(editSpecific); 
    if (editSpecific) { 
     $('#dbSearch').find('option').remove().end(); 
    } 
} 

Htmlの

<div class="col-sm-3"> 
       <select id="dbReader" onchange="loadRestaurants()"class="form-control"><option 
         value="-1">All Readers</option> 
        <c:forEach items="${readers}" var="reader"> 
         <option value="${reader.id}">${reader.name}</option> 
        </c:forEach></select> 
      </div> 
      <div class="col-sm-3"> 
       <select id="dbSearch" class="form-control"> 
        <option value="TODAY">Today</option> 
        <option value="YESTERDAY">Yesterday</option> 
        <option value="WTD">WTD</option> 
        <option value="MTD">MTD</option> 
        <option value="CUSTOM">CUSTOM</option> 
       </select> 
      </div> 

Answer 3

を任意のエラーを確認してくださいHTMLを「空白」に設定します。

フィドル - https://jsfiddle.net/wh5utw5j/4/

HTML：

<div class="form-group" id="chainDrop"> 
    <label for="restaurantChain">What chain does it belong to?</label> 
    <select class="form-control selectpicker" id="restaurantChain" name="restaurantChain" data-live-search="true"> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
      <option value="3">Three</option> 
    </select> 
</div> 

<div class="form-group" id="specific"> 
    <label for="individualRestaurant">Restaurant Name(Chain Override)</label> 
    <select class="form-control selectpicker" id="individualRestaurant" name="individualRestaurant" data-live-search="true"> 
      <option value="1">One</option> 

JS：

$(document).ready(function() { 
    $('#restaurantChain').change(function() { 
     $('#individualRestaurant').html(''); // Empty the options 
     // Do something else here 
    }); 
}); 

私も代わりにそれを有するので、最初のドロップダウンへの変更をバインドするためにそれを更新しました列をなして。ブートストラップ・select.jsが使用されているとして、次のコードを使用しなければならない

Answer 4

：

$('#restaurantChain').on('hidden.bs.select', function (e) { 
    $('#individualRestaurant').find('[id=restaurantId]').remove(); 
    $('#individualRestaurant').selectpicker('refresh'); 
});