javascript - Jquery 删除所有选择选项 - 未按预期工作

Question

我已经阅读了此问题的解决方案，但出于某种原因我无法使其正常工作。为了说明这一点，我有 2 个下拉菜单，当在一个选项中选择了一个选项时，我想删除第二个下拉菜单中的选项，并使用与第一个下拉菜单相关的数据重新加载它们。

我实际上使用的是 Sails，因此将包含下面的原始代码，但是我还创建了一个带有静态内容的 JSFiddle，但我也无法使其正常工作，可以在此处找到: https://jsfiddle.net/wh5utw5j/1/

下拉页面

<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();
  }
}

我已经测试过该函数正在执行并且它确实在执行，但我对 JQuery 为何不工作感到困惑

更新

我不确定这是否会影响它，但是我也在使用 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');
});

如您所见，我在上面代码中的复选框隐藏/取消隐藏了特定的 div。我在上面的所有代码之前还有一个复选框，用于隐藏/取消隐藏地段

我还在我的函数中添加了以下代码来测试选择器:

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

结果是:

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

更新#2

看起来这的根本原因是我正在使用它并且它正在修改我的下拉菜单: 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

上面的代码工作正常。请检查浏览器控制台和以下代码中的任何错误

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>