How to apply .hide() in a particular dropdown in jQuery?

Question

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. How can I hide from a single drop down?

My HTML code -

<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

score 3 · Accepted Answer · answered Oct 25 '20 at 06:36

Just narrow your selector to the name > class selector:

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

I tried the command in browser console, but unfortunately didn't work. It is returning `S.fn.init [prevObject: S.fn.init(1)]` and no changes seen. How can I resolve this. Thanks. — Rdm619, Oct 25 '20 at 07:21
I don't know whats that message on console. Check this Q/A https://stackoverflow.com/questions/34494873/why-is-my-jquery-selector-returning-a-n-fn-init0-and-what-is-it @Rdm619 — Ali Sheikhpour, Oct 25 '20 at 09:12

score 0 · Answer 2 · answered Oct 25 '20 at 06:40

try this,

$("select[name='player1'] option.sa").hide()

To target <option> in particular <select>, You have to traverse DOM from its parent <select>. above statement first targets <select name="player1"> and then looks for <option class="sa"> inside that <select>.

See this Jquery selector https://api.jquery.com/descendant-selector/

How to apply .hide() in a particular dropdown in jQuery?

2 Answers2