Sandeep Kumar Sandeep Kumar - 2 months ago 6
CSS Question

Hide div after selecting option in select tag

I have three options in a

select
. I want that when I select
optionB
, a div with an
id
of
demo
should be hidden. How can I do that?



$(document).ready(function() {
$('#selectOption').select(function() {
var ab = $('#selectOption').val();
if (ab == 'optionB') {
$("#demo").hide();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectOption'>
<option>--select</option>
<option value='optionA'>optionA</option>
<option value='optionB'>optionB</option>
</select>

<div id='demo'>xyz</div>





Thanks in advance.

Answer

Try this :

$(document).ready(function() {
    
    $("#selectOption").on("change",function(){
        
        if($(this).val() == "optionB" )
            
             $("#demo").hide(1000);
        
    })
    
})
<select id='selectOption'>
    <option>--select</option>
    <option value='optionA'>optionA</option>
    <option value='optionB'>optionB</option>
</select>

<div id='demo'>xyz</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>