CODEWITHSUNDEEP
javascripthtmljquerycss
Rdm619
Rdm619

Reputation: 25

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. 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.sstatic.net/H9ZwP.png

Upvotes: 1

Views: 46

Answers (2)

Akash Sarode
Akash Sarode

Reputation: 447

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/

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

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>

Upvotes: 3

Related Questions