JQuery中的select下拉框


  

  

  

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> 

如:$("#SelectData").change(function(){

     // 先清空第二个

      $("#SelectDataTwo").empty();

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

      var option = $("

      $("#SelectDataTwo").append(option);

});

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

JQuery的方法:

1、先定义一个数组

var data=new Array();

2、然后,给数组data赋值

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

for(var j=0;j             $("#selectId").append("");

JS的方法:

var = document.getElementById("SelectData");

for(var j=0;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);

四、判断在select下拉框中是否存在某个指定值的option元素

SelectData是select的的id
第一种:

(jquery方法):
var res = $(’#SelectData’).find("option[value="1"]");

if (res.length > 0) {

console.log("存在值");

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

第二种:

(js方法):

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

for(var i=0, n=opts.length; iif(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("");