基于多选切换div

Question

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

<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。取消选择，它就会被删除。

Answer 1

工作解决方案： http://jsfiddle.net/uA7XD/

JS:

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

HTML:

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

CSS:

.hidden {
    display:none;
}

Answer 2

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

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

多选更新：

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

更新的演示：http://jsfiddle.net/NXHnp/1/

Answer 3

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