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

<select id=”SelectData”>

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

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

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

</select>

一、select下拉框取值与赋值

1、设置value为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);

四、判断在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; 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>”);

}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/155169.html原文链接：https://javaforall.cn