jQuery Hide/Show with select element
I need to show and hide with the select element some divs. So far I have the HTML and I've tried many jQuery snippets online but none seemed to work. I need help please.
HTML
<div class="adwizard">
<select id="selectdrop" name="selectdrop" class="adwizard-bullet">
<option value="">AdWizard</option>
<option value="">Collateral Ordering Tool</option>
<option value="">eBrochures</option>
开发者_如何学Go <option value="">Brand Center</option>
<option value="">FunTees</option>
</select>
</div>
$("#selectdrop").change(function(){
$("#mySetOfDivsToShowHide div").hide();
$("#mySetOfDivsToShowHide div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
If your html code looks like
<div id="mySetOfDivsToShowHide>
<div>AdWizard</div>
<div>Collateral Ordering Tool</div>
<div>eBrochures</div>
<div>Brand Center</div>
<div>FunTees</div>
</div>
assuming you want to show hide some divs based on what option is selected, try this (untested):
$("select#selectdrop").change(function() {
$("div.showhide").hide();
$("div#"+$(this).val()).show();
});
You are going to need to put some values in your options, and they will need to correlate to the ids of the divs you want to show/hide.
I would add a class "showhide" to the divs you want to use as well.
$('#adwizard').hide();
$('#adwizard').show();
精彩评论