1

我希望我的选择框能够动态更改页面另一部分的 CSS，以便根据每个选择显示正确的选项。

Eg the right DIV elements are shown when the correlating select option is selected.

我的选择输入和 DIV：

<select id="chooser" class="input_select" name="chooser">
<option value="">Select...</option>
<option value="Car">Car</option>
<option value="House">House</option>
<option value="Commercial">Commercial</option>
<option value="Other">Other</option>
</select>

<div id="car" style="display:none;">Cars</div>
<div id="house" style="display:none;">House related</div>
<div id="commercial" style="display:none;">Commercial stuff</div>
<div id="other" style="display:none;">Other stuff</div>

到目前为止我的jQuery：

$(document).ready(function() {

$('#chooser').change{
  $('#house').hide()
  $('#commercial').hide()
  $('#other').hide()
  $('#car').show()
}
});

我是 jQuery 的菜鸟，我只是不知道如何告诉它通过选择哪个选项来过滤它。我的意思是，我认为我添加了 .change{} 部分是正确的，但不知道如何过滤它。

任何帮助表示赞赏。谢谢

4

3 回答 3

1

$('#chooser').val()会给你选择的值。然后只需使用if-elseor switch。

于 2012-10-26T00:29:06.173 回答
1

您的代码中存在语法错误，您应该为更改事件传递一个函数，请尝试以下操作：

$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('div').hide().filter('#'+w).show();
   })
});

http://jsfiddle.net/ss5G9/

当然隐藏页面上的所有 div 元素不是一个好主意，您可以向 div 元素添加类并隐藏那些特定的 div 元素。

<div id="car" class='div' style="display:none;">Cars</div>
<div id="house" class='div' style="display:none;">House related</div>
<div id="commercial" class='div' style="display:none;">Commercial stuff</div>
<div id="other" class='div' style="display:none;">Other stuff</div>


$(document).ready(function() {
   $('#chooser').change(function(){
      var w = this.value.toLowerCase();
      $('.div').hide().filter('#'+w).show();
   }).change()
});
于 2012-10-26T00:31:44.613 回答
1

尝试这个

$(function() {
    $('#chooser').on('change', function() {
        $('div').hide();
        var val = $(this).find('option:selected').val();
        if (val != '') {
            $('#' + val.toLowerCase()).show();
        }
    }).change();
});​

试试这个小提琴

于 2012-10-26T00:32:33.443 回答