Javascript 基于多选切换div

以下代码是我正在使用的代码：

<select id="tables" multiple="multiple" name="tables[]">
      <option>users</option>
      <option>options</option>
      <option>posts</option>
</select>

<div id="something" style="hidden">Stuff goes here.</div>

使用者
选择权
帖子
这里有东西。

我试图做的是在下拉列表中选择特定选项时进行div切换。例如，如果仅选择了“选项”选项，则会显示div。取消选择后，它将被删除

$('#tables').change(function(e){
  $('#something').toggle($(this).val() == 'options');
});

在选择更改时，如果所选选项的值等于“选项”，则显示/隐藏div

更新多选：

$('#tables').change(function(e){
    $('#something').toggle($('option[value="options"]:selected',this).length > 0);
});

更新的演示：

工作解决方案：

JS:

HTML:

---

感谢Brad-我已经在change事件中实现了类似的功能，但似乎没有正常工作。但是，您的代码有一个问题。如果选择了多个选项（例如，用户和选项），div将不会切换。@mousesport将使用“我的微移”和“微移眼色”切换wink@mousesports：查看我的更新，它将适用于多个选项，而不是

if（op.length）

和对

.show（）

和

.hide（）

的双重调用，您可以使用：

$(“#某物”）。切换（op.length>0）

或全部在一行：

$（“#某物”）。切换（$（“#表格选项[value='options']：选中”）。长度>0）)；

@jfriend00是的，这是完全正确的，但他可能想使用不同的效果或执行一些操作。是的，我一看到代码就把它清理干净了-谢谢@jfriend00。

  $('#tables').live('click', function(){
    if($('#tables').val() == 'options')
      $('#something').slideDown();
    else
      $('#something').slideUp();
  });

window.changeHandler = function() {
    var op = $("#tables option[value='options']:selected");
    if (op.length)
        $("#something").show();
    else
        $("#something").hide();
}

<select id="tables" multiple="multiple" name="tables[]" onchange="changeHandler()">
      <option>users</option>
      <option>options</option>
      <option>posts</option>
</select>

<div id="something" class="hidden">Stuff goes here.</div>

.hidden {
    display:none;
}