Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to show/hide divs by select.(jquery)

my code:

<select id="select">
<option id="1" value="thai language">option one</option>
<option id="2" value="eng language">option two</option>
<option id="3" value="other language">option three</option>
</select>

<div id="form1">content here</div>
<div id="form2">content here</div>
<div id="form3">content here</div>

what i want is to show div #form1 when select option 1 and hide form2+form3, or select option 2 show div#form2 and hide form1+form2

like image 644
vee Avatar asked Jun 25 '09 10:06

vee


People also ask

How Show hide DIV when select options are clicked in jQuery?

If you want to hide/show div on dropdown selected, use the jQuery hide() and show(). Before you perform hide or show div on dropdown selection, you need to hide them first using CSS display:none.

How to show div on change in jQuery?

Answer: Use the jQuery change() method The following example will demonstrate you how to show and hide div elements based on the dropdown selection or selected option in a select box using the jQuery change() method in combination with the show() and hide() methods.

How to hide an option in a select jQuery?

Try this: $("#edit-field-service-sub-cat-value option[value=" + title + "]"). hide();


1 Answers

$('#select').change(function() {
   $('#form1, #form2, #form3').hide();
   $('#form' + $(this).find('option:selected').attr('id')).show();
});

Do note that IDs should not start with numbers, but the above should do it.

like image 179
Paolo Bergantino Avatar answered Nov 02 '22 23:11

Paolo Bergantino