javascript - 将 jQuery 函数添加到选择框以使其动态更改 CSS

Question

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

例如选择相关的选择选项时，会显示正确的 DIV 元素。

我的选择输入和 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{} 部分，但不知道如何过滤它。

感谢任何帮助。谢谢

Answer 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()
});