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

Question

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

<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 只是我为过滤目的创建的一个属性，因为 select 离子的信息是从两个不同的 SQL 表中提取的。 industryValue 直接与 verticalMarketSelect 选项中注明的价值相关（即 industryValue="1" 将与 select 商业 的离子相关 值为 1.

我想要完成的是仅在 verticalMarketSelect 中显示选项，如果相应的选项是从上面的 industrySelect 编辑的 select。如果没有选项被 selected，verticalMarketSelect 的选项应该不可见。

编辑： 我忘记了一个非常的重要信息：我正在使用 jQuery Chosen 插件 selects 是多个 selects.

编辑： 我从类似的实现中找到了一些 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");
});

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

});

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

我能够使它正常工作，并希望确保 post 为将来可能想要实现类似功能的任何其他人提供答案。感谢大家的帮助！

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 来限制基于先前选择的选项

Using jQuery Chosen to limit options based on a previous selection

jquery

html-select

jquery-chosen