大家好，又见面了，我是你们的朋友全栈君。

<select id=”SelectData”>

　　<option value =”1″>dataOne</option>

　　<option value =”2″>dataTwo</option>

　　<option value =”3″>dataThree</option>

</select>

一、select下拉框取值与赋值

1、设置value为3的项选中
$(“#SelectData”).val(“3”);

2、设置text为dataTwo的项选中
$(“#SelectData”).find(“option[text=’dataTwo’]”).attr(“selected”,true);

3、获取当前选中项的value
$(“#SelectData”).val();

4、获取当前选中项的text
$(“#SelectData”).find(“option:selected”).text();

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。

<select “SelectDataTwo”>

</select> 

如：$(“#SelectData”).change(function(){

     // 先清空第二个

      $(“#SelectDataTwo”).empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了

      var option = $(“<option>”).val(1).text(“pxx”);

      $(“#SelectDataTwo”).append(option);

});

二、动态给select下拉框添加option

JQuery的方法：

1、先定义一个数组

var data=new Array();

2、然后，给数组data赋值

3、最后把数组的值写入下拉框

for(var j=0;j<data.length;j++){
             $(“#selectId”).append(“<option value='”+data[j]+”‘>”+data[j]+”</option>”);

}

JS的方法：

var = document.getElementById(“SelectData”);

for(var j=0;j<data.length;j++){

//selectid .add(new Option(“文本”,”值”)); //这个只能在IE中有效 
selectid .options.add(new Option(“text”,”value”)); //这个兼容IE与firefox 

}

三、设置select的动态选中

id为select的id,根据content查找对应的下拉列表值，找到之后绑定选中事件。

$(“#SelectData”).find(“option:contains(‘3’)”).attr(“selected”, true);

}else{
console.log(不存在);
}

第二种:

(js方法)：

var opts = document.getElementById(‘SelectData’).options;

for(var i=0, n=opts.length; i<n; i++){
if(opts[i].value == “3”){
console.log(“存在值”);
}
}

五、select下拉框值避免重复添加

1、通过id找到select对应的value

var res = $(“#SelectData“).find(“option[value=”4″]”);

2、进行判断

if(res.length>0){

console.log(“不添加”);

}else{

$(“#SelectData“).append(“<option value=”4″>”dataFour“</option>”);

}