CODEWITHSUNDEEP
jquery
Mr Singh
Mr Singh

Reputation: 33

How to select option class/value with jquery in select dropdown

I would like to hide/show div based on select drop-down option value/class click. But i am unable to select do that because Chrome not supporting this functionality. Could anyone please help me to find out a simple way with that i can write jquery script on click for option class/value. On web i found that on click function does not work in chrome.

Here is my code.

<select id="dd1" style="width: 12%">
<option class="all" value="all">Select below 1</option>
<option id="opt1" class="opt1" value="opt1">option 1</option>
<option class="opt2" value="opt2">option 2</option>
<option class="opt3" value="opt3">option 3</option>
<option class="opt4" value="opt4">option 4</option>
</select>

<select id="dd2" style="width: 12%">
<option value="all">Select below 1</option>
<option class="opt5" value="opt5">option 5</option>
<option  class="opt6" value="opt6">option 6</option>
<option class="opt7" value="opt7">option 7</option>
<option class="opt8" value="opt8">option 8</option>
</select>

here is the jquery code

$(document).ready(function () {
$('.opt1').on('click',function(){

$('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').show();    
$('.modal22').hide();

$("#dd2 option[value='2']").remove();

}); 

$('.fids1').on('click',function(){
$('.modal22').show();
$('.modal1, .modal2, .modal3, .modal4, .modal5, .modal6, .modal7, .modal8, .modal9, .modal10, .modal11, .modal12, .modal13, .modal14, .modal15, .modal16, .modal17, .modal18, .modal19, .modal20, .modal21, .modal23, .modal24, .modal25, .modal26').hide();    


$("#dd2 option[value='2']").remove();

}); 

});

Upvotes: 1

Views: 55

Answers (1)

David
David

Reputation: 218847

You're thinking about it the wrong way:

$('.opt1').on('click',function(){
  //...
});

You don't want to perform an action when the <option/> is "clicked". Instead, you want to perform an action when the <select/> value is changed to a specific value.

Something like this:

$('#dd1').on('change',function(){
  if ($(this).val() === 'opt1') {
    //...
  }
});

Upvotes: 1

Related Questions