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

如您所见，上面代码中的复选框隐藏/取消隐藏specific 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>

Answer 2

如果您想将下拉列表设置为完全空白，则可以将HTML设置为空白＆＃39;。

小提琴 - 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
    });
});

我还更新了它以将更改绑定到第一个下拉列表，而不是将其更改为内联。

Answer 3

正在使用Bootstrap-select.js时，应使用以下代码：

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

Answer 4

包括jsfiddle的好工作。我怀疑问题不是将loadrestaurants功能放在根范围内。在你的小提琴中，它处于“加载”功能中。

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

4 个答案: