Использование jQuery Выбрано для ограничения параметров на основе предыдущего выбора

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 непосредственно относится к значению, как отмечено в вариантах для verticalMarketSelect (т.е. industryValue = «1» будет относиться к выбору бизнеса со значением 1.

То, что я пытаюсь выполнить это только шоу опции в verticalMarketSelect, если соответствующий параметр выбран из приведенного выше industrySelect Если не выбраны параметры, параметры для verticalMarketSelect не должны быть видны

EDIT:.. я забыл очень важную часть информации: I Я использую плагин jQuery Chosen с двумя выборами будучи множественными выборами.

EDIT: Я нашел некоторый 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

Я был в состоянии получить эту работу и хотел, чтобы быть уверенным, чтобы отправить ответ для кого-либо еще, что, возможно, захочет реализовать что-то подобное в будущем. Спасибо всем за вашу помощь!

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>

Answer 2

Как правило, вы можете использовать .hide() для этого, но мне кажется, что скрывается <option> элементов не работает в каждом браузере, поэтому сначала нужно сохранить полный список, а затем удалить элементы, которые не подчиняются ваш запрос и установить .html() из <select>:

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 3

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