关于jquery设置select中option值

最近在做项目的时候用到了该知识,就是在当要更新已有数据的时候，但是该数据是通过下拉选择框选取的,那么我们要满足的就是点更新进入页面的时候会把已经选好的数据选中,我今天总结一下几种情况.

        1.如果下拉框已经有值的情况,那么恰好数据库又存的是它的value值。

         那么我们应该直接设置为选中它的value值。

         $("#eventBigType").get(0).selectedIndex=1;//直接设置索引值就好了。

        2.下拉框有值的情况，如果数据库存的是它的text值,

         那么我们需要遍历这个下拉选择框,当值相等之后选中即可

            var count=$("#eventType option").length;
 for(var i=0;i<count;i++){     
 if($("#eventType ").get(0).options[i].text ==$eventType){  //红色的为需要选中的值
           $("#eventType").get(0).options[i].selected = true;
           break;  
       }  
   }

        3.如果下拉框的值是由一个数组填充的话,那么我们可以采用双层循环来解决这个问题。

           1.首先判断需要选中的值的value值是多少,然后选中其索引就好。

for(var i =0;i<eventTypeArr.length;i++){
 if(eventTypeArr[i][1]==$eventType){
 $("#eventBigType").get(0).selectedIndex=eventTypeArr[i][0],;//index为索引值,eventTypeArr[i][0],这个为数组的选项的value值.

}循环数组获取等于$eventType的value,然后根据value值去设置索引,跟第一步一样.
         4.如果情况是二级联动下拉框,及下拉框1为指定的值,2为数组填充,这个下拉框二级联动我在我之前的文章中已经讲过。

            那么我们应该做的是先判断下拉框1的值,（这里有个问题,如果知道下拉框的value或text值的话,可以采用上面的方法设置,但是如果不知道只知道第二个下拉框的值怎么办呢。我们可以先通过第二个下拉框已知的值去获取到该值的value值,然后设置下拉框选中,可以使用设置索引的办法,然后通过使用方法2的方法设置下拉框2的值）代码如下。

html code： <p>
<label for="eventProduct">产&nbsp;品&nbsp;名&nbsp;称:</label>
<select id="productBigType1"  class="productBigType1" cssClass="small-input" onchange="changeSelect1(this.value)">
      <option value="0">产品类型</option>
       <option value="1">vmware</option>
       <option value="2">Symantec</option>
       <option value="3">Oracle</option>
       <option value="4">存储</option>
       <option value="5">易云通云终端</option>
       <option value="6">网络交换机</option>
       <option value="7">光钎交换机</option>
       <option value="8">其他产品</option>
   </select>
   <select id="eventProduct" name="eventProduct">
   <option>产品名称</option>
   </select>
</p>

         js Array: //产品类型数组
 var productTypeArr1 = new Array(['1','vsphere'],['1','vcenter'],['1','esxi'],['1','view'],['1','Operation'],['1','SRM'],['1','DR/DP'],['2','NBU'],['2','BE'],
 ['2','SSR'],['2','SF'],['2','SEP'],['2','SWG'],['2','SNAC'],['2','SDCS'],['2','DLP'],['2','SMG'],['3','单机oracle'],['3','集群oracle'],['4','IBM'],['4','同有'],['4','HP'],
 ['4','EMC'],['4','NetApp'],['4','华为'],['4','联想'],['5','易云通云终端'],['6','网络交换机'],['7','光钎交换机'],['8','其他产品']);

         jquery code: 

//设置产品下拉框
 var $eventProduct ='${periodicEvent.eventProduct}';
 setOption1:for(var i =0;i<productTypeArr1.length;i++){
 if(productTypeArr1[i][1]==$eventProduct){
 $("#productBigType1").get(0).selectedIndex=productTypeArr1[i][0];//index为索引值
 $("#productBigType1").change();
 //下面是设置二级联动下拉值
 var count=$("#eventProduct option").length;
 for(var i=0;i<count;i++){     
 if($("#eventProduct ").get(0).options[i].text == $eventProduct){  
           $("#eventProduct").get(0).options[i].selected = true;
           break setOption1;  
       }  
   }
 } 
 }

但是值得注意的是二级联动必须要加上，下拉框1的chang()方法，模拟人为点击下拉框的Onchange（）方法,这样下拉框2才会获得值。好了就讲到这里，希望能帮到你，如果有什么不对的地方，望指出，一起进步嘛。