大家好，又见面了，我是你们的朋友全栈君。
<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);
四、判断在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.net/155169.html原文链接：https://javaforall.net
![Vue.js 入门教程[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
