Question

我需要使用select元素显示和隐藏一些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();

jQuery使用select元素隐藏/显示

3 个答案: