开发者

jQuery Hide/Show with select element

开发者 https://www.devze.com 2023-01-03 04:53 出处:网络
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.

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();
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号