使用 jQuery Chosen 限制基于先前选择的选项答案

【问题标题】：Using jQuery Chosen to limit options based on a previous selection使用 jQuery Chosen 限制基于先前选择的选项
【发布时间】：2016-03-24 20:07:34
【问题描述】：

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

<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 与verticalMarketSelect 选项中注明的值直接相关（即，industryValue="1" 将与值为 1 的 Business 选择相关。

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

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

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

jQuery('#industrySelect').chosen().change(function() {
  var selected = [];
  jQuery('#industrySelect').find("option").each(function() {
    if (this.selected) {
      selected[this.value] = this;
    }
  })
  .each(function() {
    this.disabled = selected[this.value] && selected[this.value] !== this;
  });
  jQuery('#verticalMarketSelect').trigger("chosen:updated");
});

【问题讨论】：

要隐藏整个select#verticalMarketSelect 还是要显示空选择？
我想显示一个空选择。或者更好的是，在#industrySelect 中进行选择之前禁用选择。
@SeanCallahan 我编辑了我的答案并添加了一个演示，请看一下。请考虑 css 不存在于演示中
@AshkanMobayenKhiabani 谢谢！请参阅我上面的编辑。抱歉没有早点提！
@SeanCallahan 我认为这不会有什么不同。你看过演示吗？

标签： jquery html-select jquery-chosen

【解决方案1】：

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

var originalValues;
$('#industrySelect').change(function() {
   if (!originalValues) {
      originalValues = {};
      $('#verticalMarketSelect').children().each(function() {
         var industryValue = $(this).attr('industryValue');
            if(!(industryValue in originalValues)){
             originalValues[industryValue] = [];
         }
         originalValues[industryValue].push([$(this).val(), $(this).html()]);
      });
   }

   $('#verticalMarketSelect').empty();
   for(var x in originalValues[$('#industrySelect').val()]){
      var v = originalValues[$('#industrySelect').val()][x];
    $('#verticalMarketSelect').append('<option value="'+v[0]+'">' + v[1] + '</option>');
   }

});

【讨论】：

我完全忘了提到我正在使用带有多个选择的 jQuery 选择插件。对不起，托马斯！

【解决方案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

【讨论】：

【解决方案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>

【讨论】：