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

根据多个选择切换div

3 个答案: