如何隐藏\\显示基于JQuery的另一个选定选项的选项的特定值？

Question

I Have html select form like this:

<label>Num:</label>
<select id="id_num">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
    <option value='car'>car</option>
    <option value='bike'>bike</option>
    <option value='house'>house</option>
    <option value='money'>money</option>
    <option value='plane'>plane</option>
    <option value='wife'>wife</option>
</select>

In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.

How to solve that condition by using jQuery?

Answer 1

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,

Please have a look on the code below:

 $(function() { $('#id_num').on('change', function(e) { if ($(this).val() == 1) { var arr = ['car', 'bike']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else if ($(this).val() == 2) { var arr = ['house', 'money']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else if ($(this).val() == 3) { var arr = ['plane', 'wife']; $('#id_choices option').each(function(i) { if ($.inArray($(this).attr('value'), arr) == -1) { $(this).css('display', 'none'); } else { $(this).css('display', 'inline-block'); } }); } else { $('#id_choices option').each(function(i) { $(this).css('display', 'inline-block'); }); } }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Num:</label> <select id="id_num"> <option disabled selected>Select</option> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value=''>all</option> </select> <label>Choices:</label> <select id="id_choices"> <option value='car'>car</option> <option value='bike'>bike</option> <option value='house' >house</option> <option value='money' >money</option> <option value='plane' >plane</option> <option value='wife' >wife</option> </select> 

Hope this helps!

Answer 2

You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove() ), and then only the relevant options are re-added to #id_choices (using append() ) to replace them.

Working Example:

 $(document).ready(function(){ var car = '<option value="car">car</option>'; var bike = '<option value="bike">bike</option>'; var house = '<option value="house">house</option>'; var money = '<option value="money">money</option>'; var plane = '<option value="plane">plane</option>'; var wife = '<option value="wife">wife</option>'; function options1() { $('#id_choices').append(car); $('#id_choices').append(bike); } function options2() { $('#id_choices').append(house); $('#id_choices').append(money); } function options3() { $('#id_choices').append(plane); $('#id_choices').append(wife); } function displayOptions() { $('#id_choices option').remove(); switch ($('#id_num option:selected' ).text()) { case('1') : options1(); break; case('2') : options2(); break; case('3') : options3(); break; case('all') : options1(); options2(); options3(); break; } } $('#id_num').change(function(){displayOptions();}); displayOptions(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Num:</label> <select id="id_num"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value=''>all</option> </select> <label>Choices:</label> <select id="id_choices"> <option value='car'>car</option> <option value='bike'>bike</option> <option value='house'>house</option> <option value='money'>money</option> <option value='plane'>plane</option> <option value='wife'>wife</option> </select> 

---

For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:

 var numbers = document.getElementById('id_num'); var choices = document.getElementById('id_choices'); function displayOptions() { var optionSet1 = ['car', 'bike']; var optionSet2 = ['house', 'money']; var optionSet3 = ['plane', 'wife']; var oldOptions = choices.getElementsByTagName('option'); var selected = numbers.options[numbers.selectedIndex].text; while (oldOptions.length > 0) { choices.removeChild(oldOptions[0]); } switch (selected) { case('1') : var optionSet = optionSet1; break; case('2') : optionSet = optionSet2; break; case('3') : optionSet = optionSet3; break; case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break; } for (var i = 0; i < optionSet.length; i++) { var option = document.createElement('option'); option.setAttribute('value',optionSet[i]); option.textContent = optionSet[i]; choices.appendChild(option); } } numbers.addEventListener('change',displayOptions,false); window.addEventListener('load',displayOptions,false); 

 <label>Num:</label> <select id="id_num"> <option value='1'>1</option> <option value='2'>2</option> <option value='3'>3</option> <option value=''>all</option> </select> <label>Choices:</label> <select id="id_choices"> <option value='car'>car</option> <option value='bike'>bike</option> <option value='house'>house</option> <option value='money'>money</option> <option value='plane'>plane</option> <option value='wife'>wife</option> </select> 

Answer 3

使用.prop()而不是使用disabled属性（如Saumya的答案中）添加值为none的属性display ，以防您希望它们完全不可见而不是仅禁用/灰显

Answer 4

there may be a better way, however this does work.. you can also add hide/display classes to any other elements

  $(document).ready(function () { $('#id_num').on('change', change) }); function change() { $('#id_choices > option').hide(); $($(this).find(':selected').attr('clssval')).show(); } 

 .sel{display:none;} .num1{display:block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label>Num:</label> <select id="id_num"> <option value='1' clssval=".num1">1</option> <option value='2' clssval=".num2">2</option> <option value='3' clssval=".num3">3</option> <option value='' clssval=".num1,.num2,.num3">all</option> </select> <label>Choices:</label> <select id="id_choices"> <option value='car' class="sel num1">car</option> <option value='bike' class="sel num1">bike</option> <option value='house' class="sel num2">house</option> <option value='money' class="sel num2">money</option> <option value='plane' class="sel num3">plane</option> <option value='wife' class="sel num3">wife</option> </select>