如何使用jQuery选择/ .change（）来显示隐藏的div

我有以下选择字段，并根据是否选择类.show-x-trend或show-x我想有条件地显示一个单独的div。如果选择.show-x-trend<option>，我想揭示已经隐藏的#x-axis-trend-wrap<div>，如果选择了show-x选项，我想揭示已经隐藏的#x-axis-wrap<div>。在下面的代码中，你会看到我有两个CSS类，也有值分配给3个选择选项，因为我试图用几种不同的方式达到效果，但目前为止没有运气。如何使用jQuery选择/ .change（）来显示隐藏的div

<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>

来源

2012-03-29 Brian

我不明白这一点。你能更清楚一点吗？你想选择一个选项并根据选项的类来隐藏/显示一个div？是吗？ – elclanrs 2012-03-29 18:53:43

@elclanrs多数民众赞成在我的阅读！ – ManseUK 2012-03-29 18:57:57

@elclanrs没错。如果选择了'option.show-x-trend'，我会淡入'div＃x-axis-trend-wrap'。 'option.show-x'被选中，我淡入'div＃x-axis-wrap'。 – Brian 2012-03-29 19:02:44

您可以使用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')); 
});

工作演示 - http://jsfiddle.net/X2dPt/

来源

2012-03-29 18:53:58 ShankarSangoli

+1很好... did not know'.toggle（）'可以传递一个布尔值...比我的简单！总是用jQuery学习 – ManseUK 2012-03-29 18:56:14

控制台告诉我'object has no method'选项'' – Brian 2012-03-29 19:00:53

@Brain - 请检查我编辑的答案。这是一个错字。 – ShankarSangoli 2012-03-29 19:03:20

尝试是这样的

$("#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()

来源

2012-03-29 18:52:14 ManseUK

请更正这个'$（this）.option（'：selected'）'，它应该是'find'而不是选项:) – ShankarSangoli 2012-03-29 18:58:33

如何使用jQuery选择/ .change（）来显示隐藏的div

回答

相关问题