views:

63

answers:

3

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>
             <option value="">Brand Center</option>
             <option value="">FunTees</option>
        </select>
    </div>
A: 
$('#adwizard').hide();
$('#adwizard').show();
Argiropoulos Stavros
A: 
$("#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>
Kaaviar
Yes more or less it would have more content though
Ozzy
A: 

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.

Bala Clark
You're assuming his divs can have ids like <div id="Collateral Ordering Tool"></div>But it's actually a bad practice since your not supposed to have spaces in attributes.
Kaaviar
Yes but I want one of the options to be selected by default. How do I do that.
Ozzy
@ozzygmz just add an extra `.change()` on the end of his code to trigger the change event when the page loads, and the currently selected item will have its `div` shown, and the others will be hidden.
Doug Neiner
The code did not work
Ozzy