Question

我有两个选择选项，如下所示。

<div class="wrapper">
  <select id="industrySelect" class="chosen-industry-select" data-placeholder="select industry" multiple>
    <option value=""></option>
    <option value="1">Business</option>
    <option value="2">Education</option>
    <option value="3">Healthcare</option>
  </select>

  <select id="verticalMarketSelect" class="chosen-verticalMarket-select" data-placeholder="select vertical market" multiple>
    <option value=""></option>
    <option value="1" industryValue="1">Retail</option>
    <option value="2" industryValue="1">Construction</option>
    <option value="3" industryValue="1">Automotive</option>
    <option value="4" industryValue="2">University</option>
    <option value="5" industryValue="2">Elementary School</option>
    <option value="6" industryValue="2">High School</option>
    <option value="7" industryValue="3">Hospital</option>
    <option value="8" industryValue="3">Doctor Office</option>
    <option value="9" industryValue="3">Dentist</option>
  </select>
</div>

industryValue只是我为过滤目的而创建的属性，因为选择的信息是从两个不同的SQL表中提取的。 industryValue与[{1}}的选项中指出的值直接相关（即，industryValue =“1”与选择 Business 的值相关。

我想要完成的是，如果从上面的verticalMarketSelect中选择了相应的选项，则只显示verticalMarketSelect中的选项。如果未选择任何选项，则industrySelect的选项不应显示。

编辑：我忘记了非常重要信息：我使用的是jQuery Chosen插件，两个选项都是多选。

编辑：我从类似的实现中找到了一些jQuery，但它似乎并不能满足我的需求。

verticalMarketSelect

Answer 1

通常，您可以使用.hide()，但似乎隐藏<option>元素在每个浏览器中都不起作用，因此您首先需要保存完整列表，然后删除不符合您查询的元素，并设置.html()的{{1}}：

<select>

Answer 2

HTML：

<div style="display:none;" id = "sublist">
    <option value="1" industryValue="1">Retail</option>
    <option value="2" industryValue="1">Construction</option>
    <option value="3" industryValue="1">Automotive</option>
    <option value="4" industryValue="2">University</option>
    <option value="5" industryValue="2">Elementary School</option>
    <option value="6" industryValue="2">High School</option>
    <option value="7" industryValue="3">Hospital</option>
    <option value="8" industryValue="3">Doctor Office</option>
    <option value="9" industryValue="3">Dentist</option>
</div>

使用Javascript：

    $('#industrySelect').change(function(){
         $('#verticalMarketSelect').empty();
         $('#verticalMarketSelect').append($('#sublist').find('option[industryValue="' + $(this).val()+'"]'));

});

以下是DEMO

Answer 3

我能够让这个工作，并希望确保为其他任何可能希望将来实现类似功能的人发布答案。谢谢大家的帮助！

jQuery('#industrySelect').chosen().change(function() {
  var industrySelected = jQuery(this).chosen().val();
  var $verticalMarket = jQuery('select#verticalMarketSelect');
  var $verticalMarketHolder = jQuery('select#verticalMarketHolder');
  if (industrySelected == null) {
    $verticalMarket.empty();
  } else {
    $verticalMarket.find('option.existing').removeClass('existing');
    jQuery.each(industrySelected, function(index, value) {
      $verticalMarket.find('[industry="' + value + '"]').addClass('existing');
    });
    $verticalMarket.find('option').not('.existing').remove();
    jQuery.each(industrySelected, function(index, value) {
      var option = $verticalMarketHolder.find('[industry="' + value + '"]').clone();
      var existingOptions = $verticalMarket.find('[industry="' + value + '"]');
      if (existingOptions.length == 0) {
        $verticalMarket.append(option);
      }
    });
  }
  jQuery('#verticalMarketSelect').trigger('chosen:updated');
});
jQuery(function() {
  jQuery('#industrySelect').trigger('change');
});

<div class="wrapper">
  <select id="industrySelect" class="chosen-industry-select" data-placeholder="select industry" multiple>
    <option value=""></option>
    <option value="1">Business</option>
    <option value="2">Education</option>
    <option value="3">Healthcare</option>
  </select>

  <select id="verticalMarketSelect" class="chosen-verticalMarket-select" data-placeholder="select vertical market" multiple>
    <option value=""></option>
    <option value="1" industryValue="1">Retail</option>
    <option value="2" industryValue="1">Construction</option>
    <option value="3" industryValue="1">Automotive</option>
    <option value="4" industryValue="2">University</option>
    <option value="5" industryValue="2">Elementary School</option>
    <option value="6" industryValue="2">High School</option>
    <option value="7" industryValue="3">Hospital</option>
    <option value="8" industryValue="3">Doctor Office</option>
    <option value="9" industryValue="3">Dentist</option>
  </select>
</div>

使用jQuery Chosen根据以前的选择限制选项

3 个答案: