jQuery，在一个字符串中隐藏或显示选择菜单的多个子级

Question

我想要显示/隐藏与之前选择的选项相关的多个选项。

我可以用多个字符串来做，但我希望它是“一个字符串”。

ai95是我的第一个下拉菜单，ai96是第二个。

例如：

$(document).ready(function(){

var uniad = $('[name*="_ai95_"]').val();

if (uniad > 0 && uniad < 2)
{
$('[name*="_ai96_"]').children().hide();
$('[name*="_ai96_"]').children('option[value="1"]').show();
$('[name*="_ai96_"]').children('option[value="15"]').show();
$('[name*="_ai96_"]').children('option[value="25"]').show();

}else if (uniad > 1 && uniad < 3)
{ 
$('[name*="_ai96_"]').children().hide();
$('[name*="_ai96_"]').children('option[value="11"]').show();
$('[name*="_ai96_"]').children('option[value="35"]').show();
$('[name*="_ai96_"]').children('option[value="25"]').show();

and more "else if" like them...}

这只是我想做的一部分。我只想:首先隐藏它们，然后像这样通过缩小字符串来显示其中的一些：

else if (uniad > 1 && uniad < 3){ 
$('[name*="_ai96_"]').children().hide();
$('[name*="_ai96_"]').children('option[value="11"]', 'option[value="35"]','option[value="25"]').show();`

有没有办法做到这一点？谢谢。

Answer 1

像这样的东西？

​

var selectEl = $("#second-select");

selectEl.children().hide()
        .end() // return to the parent node
        .children("[value='3'], [value='5'], [value='12']").show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Second select box:
<select id="second-select" name="uc_autorilist[]" size="5" multiple>
     <option value="3">Rose Tremain</option>
     <option value="4">Jonathan Coe</option>           
     <option value="5">Cecilia Ahern</option>
     <option value="6">Marinel Serban</option>
     <option value="7">Emanuela Cherchez</option>
     <option value="8">Peter Buckley</option>
     <option value="9">Clark Duncan</option>
     <option value="10">Carlos-Ruiz Zafon</option>
     <option value="11">Catalin Paduraru</option>
     <option value="12">Dan-Silviu Boerescu</option>
</select>

​