如何在 jQuery 的特定下拉列表中应用 .hide()？
[英]How to apply .hide() in a particular dropdown in jQuery?
问题描述
I have two different drop downs here.
我这里有两个不同的下拉菜单。 Both the drop downs have some options with different classes.两个下拉菜单都有一些不同类别的选项。 I want to hide the options of a particular class from a particular drop down, not from both the drop downs.I am using $(".sa").hide() , but it hides the options from both the drop downs.我想从特定下拉列表中隐藏特定类的选项，而不是从两个下拉列表中$(".sa").hide()我正在使用$(".sa").hide() ，但它隐藏了两个下拉列表中的选项。 How can I hide from a single drop down?如何隐藏单个下拉菜单？
My HTML code -我的 HTML 代码 -
<head>
</head>
<body>
<select name="player1" class="btn btn-secondary btn-lg dropdown-toggle" style="text-size : 50px;">
<option value="select" disabled= "true" style="color: grey" selected>Player 1</option>
<option class="ind" value="4104">Mayank Agrawal</option>
<option class="ind" value="4063">Yuzvendra Chahal</option>
<option class="ind" value="3644">Ravindra Jadeja</option>
<option class="ind" value="4034">Siddarth Kaul</option>
<option class="ind" value="3991">Bhuvneshwar Kumar</option>
<option class="sa" value="3783">David Miller</option>
<option class="sa" value="4636">Lungisani Ngidi</option>
<option class="sa" value="4641">Dane Paterson</option>
<option class="sa" value="4339">Kagiso Rabada</option>
<option class="sa" value="4637">JJ Smuts</option>
<option class="sa" value="5829">Kyle Verreynne</option>
</select>
<select name="player2" class="btn btn-secondary btn-lg dropdown-toggle">
<option value="select" disabled= "true" style="color: grey" selected>Player 1</option>
<option class="ind" value="4104">Mayank Agrawal</option>
<option class="ind" value="4063">Yuzvendra Chahal</option>
<option class="ind" value="3644">Ravindra Jadeja</option>
<option class="ind" value="4034">Siddarth Kaul</option>
<option class="ind" value="3991">Bhuvneshwar Kumar</option>
<option class="sa" value="3783">David Miller</option>
<option class="sa" value="4636">Lungisani Ngidi</option>
<option class="sa" value="4641">Dane Paterson</option>
<option class="sa" value="4339">Kagiso Rabada</option>
<option class="sa" value="4637">JJ Smuts</option>
<option class="sa" value="5829">Kyle Verreynne</option>
</select>
</body>
<script src="D:\Important Documents\Rohit\django_pro\hello\static\jquery-3.5.1.min.js"></script>
</html> ```
[enter image description here][1]
[1]: https://i.stack.imgur.com/H9ZwP.png
2 个解决方案
解决方案1
3 已采纳 2020-10-25 06:36:43
Just narrow your selector to the name > class selector:只需将您的选择器缩小到name > class选择器：
$('select[name="player2"] .sa').hide()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="player1" class="btn btn-secondary btn-lg dropdown-toggle" style="text-size : 50px;"> <option value="select" disabled= "true" style="color: grey" selected>Player 1</option> <option class="ind" value="4104">Mayank Agrawal</option> <option class="ind" value="4063">Yuzvendra Chahal</option> <option class="ind" value="3644">Ravindra Jadeja</option> <option class="ind" value="4034">Siddarth Kaul</option> <option class="ind" value="3991">Bhuvneshwar Kumar</option> <option class="sa" value="3783">David Miller</option> <option class="sa" value="4636">Lungisani Ngidi</option> <option class="sa" value="4641">Dane Paterson</option> <option class="sa" value="4339">Kagiso Rabada</option> <option class="sa" value="4637">JJ Smuts</option> <option class="sa" value="5829">Kyle Verreynne</option> </select> <select name="player2" class="btn btn-secondary btn-lg dropdown-toggle"> <option value="select" disabled= "true" style="color: grey" selected>Player 2</option> <option class="ind" value="4104">Mayank Agrawal</option> <option class="ind" value="4063">Yuzvendra Chahal</option> <option class="ind" value="3644">Ravindra Jadeja</option> <option class="ind" value="4034">Siddarth Kaul</option> <option class="ind" value="3991">Bhuvneshwar Kumar</option> <option class="sa" value="3783">David Miller</option> <option class="sa" value="4636">Lungisani Ngidi</option> <option class="sa" value="4641">Dane Paterson</option> <option class="sa" value="4339">Kagiso Rabada</option> <option class="sa" value="4637">JJ Smuts</option> <option class="sa" value="5829">Kyle Verreynne</option> </select>
解决方案2
0 2020-10-25 06:40:00
try this,尝试这个，
$("select[name='player1'] option.sa").hide()
To target <option> in particular <select>, You have to traverse DOM from its parent <select>.要针对 <option> 特别是 <select>，您必须从其父 <select> 遍历 DOM。 above statement first targets <select name="player1"> and then looks for <option class="sa"> inside that <select>.上面的语句首先针对 <select name="player1">，然后在 <select> 中查找 <option class="sa">。
See this Jquery selector https://api.jquery.com/descendant-selector/请参阅此 Jquery 选择器https://api.jquery.com/descendant-selector/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.