Javascript 如何使用jQuery select/.change（）显示隐藏的div

我有以下选择字段，并根据是否选择了类

.show-x-trend

或

show-x

，我希望有条件地显示一个单独的div。如果选择了

.show-x-trend

，我想显示已经隐藏的

#x轴趋势包裹

，如果选择了

show-x

选项，我想显示已经隐藏的

#x轴包裹

。在下面的代码中，您将看到我有两个CSS类，还有分配给3个选择选项的值，因为我尝试了几种不同的方法来实现效果，但到目前为止没有成功

<div id="visualize-wrap">
    <h3>Visualization Shows</h3>
    <select id="visualize-shows" name="visualize">
        <option class="no-show" value="00">Select One</option>
        <option class="show-x-trend" value="01">Trend Over Time</option>
        <option class="show-x" value="02">Breakdown of Sum Total</option>
        <option class="show-x" value="03">Side-by-side Comparison</option>
    </select>
</div>

可视化显示
选择一个
随时间变化的趋势
总额细目
并列比较

试试这样的方法

$("#visualize-shows").change(function() {
   $selected = $(this).find('option:selected'); // get selected option
   if ($selected.hasClass('show-x-trend')) { // check the class
      $('#x-axis-trend-wrap').toggle(); // toggle display
   } else if ($selected.hasClass('show-x')) {
      $('#x-axis-wrap').toggle();
   }
});

---

这使用了

试试这样的方法

$("#visualize-shows").change(function() {
   $selected = $(this).find('option:selected'); // get selected option
   if ($selected.hasClass('show-x-trend')) { // check the class
      $('#x-axis-trend-wrap').toggle(); // toggle display
   } else if ($selected.hasClass('show-x')) {
      $('#x-axis-wrap').toggle();
   }
});

---

这使用您可以使用

hasClass

方法来确定所选选项是否包含所需的类，并相应地采取行动

$('#visualize-shows').change(function(){
    var $selectedOption = $(this).find('option:selected');
    $('#x-axis-trend-wrap')
    .toggle( $selectedOption.hasClass('show-x-trend'));
    $('#x-axis-wrap')
    .toggle( $selectedOption.hasClass('show-x'));
});

---

工作演示-

您可以使用

hasClass

方法来确定所选选项是否包含所需的类，并相应地执行操作

$('#visualize-shows').change(function(){
    var $selectedOption = $(this).find('option:selected');
    $('#x-axis-trend-wrap')
    .toggle( $selectedOption.hasClass('show-x-trend'));
    $('#x-axis-wrap')
    .toggle( $selectedOption.hasClass('show-x'));
});

---

工作演示-

我不明白。你能说清楚一点吗？是否要根据选项的类别选择一个选项并隐藏/显示div？是吗？@elclanrs我就是这么看的@埃尔克兰斯：没错。如果选择了

选项.show-x-trend

，我将淡入

div#x轴趋势包裹

<代码>选项。选择show-x，我淡入

div#x轴环绕

。我不明白。你能说清楚一点吗？是否要根据选项的类别选择一个选项并隐藏/显示div？是吗？@elclanrs我就是这么看的@埃尔克兰斯：没错。如果选择了

选项.show-x-trend

，我将淡入

div#x轴趋势包裹

<代码>选项。选择show-x，我淡入

div#x轴包裹

+1漂亮。。。不知道

。toggle（）

可以传递一个布尔值。。。比我的简单！！！始终使用jQueryconsole学习告诉我，

对象没有方法“选项”

这样认为。谢谢你的帮助+1很好。。。不知道

。toggle（）

可以传递一个布尔值。。。比我的简单！！！始终使用jQueryconsole学习告诉我，

对象没有方法“选项”

这样认为。谢谢你的帮助！请更正此

$（此）。选项（':selected'）

，它应该是

find

而不是option:）请更正此

$（此）。选项（':selected'）

，它应该是

find

而不是option:）