jQuery 隐藏/显示选择元素

Question

我需要使用选择元素显示和隐藏一些 div。到目前为止，我已经有了 HTML，并且在线尝试了许多 jQuery 片段，但似乎没有一个起作用。我需要帮助。

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>

Answer 1

$("#selectdrop").change(function(){
   $("#mySetOfDivsToShowHide div").hide();
  $("#mySetOfDivsToShowHide div:eq(" + $(this).attr("selectedIndex") + ")").show();
});

如果你的 html 代码看起来像

<div id="mySetOfDivsToShowHide>
  <div>AdWizard</div>
  <div>Collateral Ordering Tool</div>
  <div>eBrochures</div>
  <div>Brand Center</div>
  <div>FunTees</div>
</div>

Answer 2

假设您想根据所选选项显示隐藏一些 div，请尝试以下操作（未经测试）：

$("select#selectdrop").change(function() {
    $("div.showhide").hide();
    $("div#"+$(this).val()).show();
});

您将需要在选项中放入一些值，并且它们需要与您想要显示的 div 的 id 相关联/隐藏。

我会向您想要使用的 div 添加一个“showhide”类。

Answer 3

$('#adwizard').hide();
$('#adwizard').show();