Jquery:如何测试下拉列表的多个值

时间:2013-10-04 13:31:18

标签: jquery

我正在使用下拉框中的项目选项来隐藏和显示div。 我是jquery的新手。我希望能够测试多个值,如If 选择p1,p2和p3,id为id,指定-source将显示。到目前为止,它现在适用于p1。如何为多个值写这个?

<select name = "genericId" id="myselect" >
<option value="p1">Section1</option>
<option value="p2">Section2</option> 
<option value="p3">Section3</option>
<option value="j2">Section4</option> 
<option value="j3">Section5</option>
</select>

 <div id="specify-source">
    <p class="headerSection">Select Branch</p>
    <select name="listOfBranches" id="brnlist">
        <option value="0">Branch 1</option>
        <option value="1">Branch 2</option>
        <option value="2">Branch 3</option>
    </select>
</div>

这很有效。

  $('#myselect').change(function () {
        ($(this).val() == "p1") ? $('#specify-source').show() : $('#specify-source').hide();
    });

我想测试多个值,如p1,p2,p3

2 个答案:

答案 0 :(得分:0)

只需使用OR运算符||

将条件添加到if语句中
$('#myselect').change(function () {
  if($(this).val() == "p1" || $(this).val() == "p2" || $(this).val() == "p3"){
     $('#specify-source').show()
  }else
  { 
     $('#specify-source').hide();
  }
});

为了进行7次比较,让我们使用switch语句:

$('#myselect').change(function () {
  var target = $(this).val();
  switch (target)
   {
    case "p1":
    case "p2":
    case "p3":
     $('#specify-source').show()
    break;
    case "p4":
    //your p4 code
    break;
    default:
    //default code to execute
     $('#specify-source').hide();
   }
});

当要执行的操作类似时,将条件置于彼此之后,而不使用break;

答案 1 :(得分:0)

来自Jquery文档

  

对于<select multiple="multiple">元素,.val()   method返回包含每个选定选项的数组

http://api.jquery.com/val/

您可以循环数组以查看是否存在任何数组。