Javascript 在选择框中添加jQuery函数，使其动态更改CSS

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

例如，选择相关选择选项时，将显示右侧DIV元素

我的选择输入和DIVs：

<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的noob，我只是不知道如何告诉它根据选择的选项进行过滤。我的意思是，我想我添加了.change{}部分，但不知道如何过滤它

---

感谢您的帮助。谢谢

$（“#选择器”）。val（）

将为您提供所选的值。然后，只需使用

如果其他

或

开关

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

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

当然，隐藏页面上的所有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>

试试这个

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

试试这个

我应该这样做吗？：$（'chooser'）.change{if$（'chooser'）.val（'Car'）{$（'house'）.hide（）$（'commercial'）.hide（）$（'other'）.hide（）$（'other'）.hide（）$（'Car'）.show（）}

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

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