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

Question

我有HTML选择的形式是这样的：

<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> 

对我来说，我需要它，这样如果我选择“1”的第一选择形式（＃ID_NUM），那么接下来的选择形式（＃ id_choices）应该只显示“汽车”和“自行车”选项，如果我选择“2”，#id_choices应该只显示“房子”和“钱”，以及其余的..但如果我选择“全部”，那么应显示#id_choices上的每个选项。

如何通过使用jQuery来解决这个问题？

Answer 1

您可以使用jQuery的$.inArray()过滤你的选择，使他们display: none;取决于数组项的发生，

请对下面的代码一看：

$(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>

希望这有助于！

Answer 2

添加属性display使用.prop()的none一个值，而不是在情况下使用disabled属性（如在Saumya的回答）你想他们完全不可见的，而不是仅仅禁用/变灰

Answer 3

有可能是一个更好方式，然而这确实工作..你也可以隐藏/显示类添加到任何其他元素

 $(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>

Answer 4

您可以一次加载网页时，然后每次#id_num变化，使得所有可见#id_choices选项被删除（使用remove()）运行的函数，然后只有相关的选项重新添加到#id_choices（使用append()）至替换它们。

工作实例：

$(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>

---

为了完整起见，这里是与上述相同的方法，但这次是在原生的JavaScript，这样你可以比较并与上面的jQuery对比：

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>