select下拉框动态赋值、默认选中、删除

select下拉框赋值1.使用JS实现新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1.使用JS实现你好！这

silence-lizz

12375人浏览 · 2020-05-19 22:15:00

silence-lizz · 2020-05-19 22:15:00 发布

select下拉框动态赋值、默认选中、删除

1.使用JS实现
- 动态赋值、默认选中、删除
2. 使用jQuery实现
- 动态赋值、默认选中、删除
- 对多选下拉框进行批量操作
3.源码

记录分享一下个人常用的对select下拉框的动态操作，有错误的还请指正，方法肯定不止这几种，欢迎各位补充。

1.使用JS实现

动态赋值、默认选中、删除

//html 代码
<select id="select_one">
	<option></option>
</select>

//js 代码
// 定义一个变量 arr
let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多']

//js 动态赋值
let com = document.getElementById("select_one");
for( let i = 0;i<arr.length;i++){
	com.options.add(new Option(arr[i],i));
}

//js 默认选中
let options = document.getElementById("select_one").options;
for(let i = 0;i<options.length;i++){
	if(options[i].value==2){//根据id选中阿里
		options[i].selected = true;
	}
}

//js 删除option（删除第1个options）
com.options.remove(1);

2. 使用jQuery实现

动态赋值、默认选中、删除

//html 代码
<select id="select_two">
	<option></option>
</select>

//js 代码
// 定义一个变量 arr
let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多']

//jQuery 动态赋值第一种
let oHtml = '';
for(let i=0;i<arr.length;i++){
	oHtml+='<option value="'+i+'">'+arr[i]+'</option>';
}
$("#select_two").html(oHtml);

//jQuery 动态赋值第二种
for(let i=0;i<arr.length;i++){
	if(arr[i]=="腾讯"){//默认选中腾讯
		$("#select_two").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>");
	}else{
		$("#select_two").append("<option value='"+i+"'>"+arr[i]+"</option>");
	}
}

//根据value默认选中
$("#select_two").find("option[value='5']").attr("selected",true);//选中拼多多

//根据value移除选中
$("#select_two").find("option[value='1']").attr("selected",false);//移除选中腾讯

//根据value实现删除
$("#select_two").find("option[value='5']").remove();
$("#select_two option[value='0']").remove();

对多选下拉框进行批量操作

//html 代码
<select id="select_four " multiple="multiple"   style="height: 200px;width: 100px;">
	<option value="0" selected="selected">百度</option>
	<option value="1" selected="selected">腾讯</option>
	<option value="2" selected="selected">阿里巴巴</option>
	<option value="3" >字节跳动</option>
	<option value="4" >京东</option>
	<option value="5" selected="selected">拼多多</option>
</select>

//批量选中 、批量移除选中
setTimeout(function(){
	//移除选中所有id为基数的
	$("#select_four option").each(function(){
		if($(this).val()%2==0){
			$("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",false);
		}
	});
	//选中所有id为偶数的
	$("#select_four option").each(function(){
		if($(this).val()%2!=0){
			$("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",true);
		}
	});
},2000);

3.源码

不管是用JS还是用jQuery实现select下拉框的动态操作，无非都是先取到对应的dom节点，然后实现增删option；选中与非选中都是遍历所有option，通过value或者文本判断是否符合选中或非选中的条件（以下代码都是通过value进行判断的），设置selected所对应的属性来实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>select动态赋值、默认选中、删除</title>
		<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
	</head>
	<body>
		<h3>单选框</h3>
		<select id="select_one">
			<option></option>
		</select>
		<select id="select_two">
			<option></option>
		</select>
		<select id="select_three">
			<option></option>
		</select>
		<br>
		<h3>多选框</h3>
		<select id="select_four" multiple="multiple" size=3  style="height: 200px;width:100px"></select>
		<select id="select_five" multiple="multiple"   style="height: 200px;width: 100px;">
			<option value="0" selected="selected">百度</option>
			<option value="1" selected="selected">腾讯</option>
			<option value="2" selected="selected">阿里巴巴</option>
			<option value="3" >字节跳动</option>
			<option value="4" >京东</option>
			<option value="5" selected="selected">拼多多</option>
		</select>
	</body>
	<script type="application/javascript">
		//全局变量 arr
		let arr = ['百度','腾讯','阿里巴巴','字节跳动','京东','拼多多']
		
		/** js实现*/
		//js 动态赋值
		let com = document.getElementById("select_one");
		for( let i = 0;i<arr.length;i++){
			com.options.add(new Option(arr[i],i));
		}
		//js 默认选中
		let options = document.getElementById("select_one").options;
		for(let i = 0;i<options.length;i++){
			if(options[i].value==2){//根据id选中阿里
				options[i].selected = true;
			}
		}
		//js 删除option（删除第1个options）
		com.options.remove(1);
		
		/**jq实现**/
		//jq 通过拼接html实现 动态赋值
		let oHtml = '';
		for(let i=0;i<arr.length;i++){
			oHtml+='<option value="'+i+'">'+arr[i]+'</option>';
		}
		$("#select_two").html(oHtml);
		
		for(let i=0;i<arr.length;i++){
			if(arr[i]=="腾讯"){
				$("#select_three").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>");
			}else{
				$("#select_three").append("<option value='"+i+"'>"+arr[i]+"</option>");
			}
		}
		//jq实现动态选中 、移除选中
		setTimeout(function(){//为了看清楚效果，两秒后执行
			$("#select_two").find("option[value='5']").attr("selected",true);//选中拼多多
			$("#select_three").find("option[value='1']").attr("selected",false);//移除选中腾讯
			},2000);
		
		
		//多选下拉框赋值  并且选中id为基数的
		for(let i=0;i<arr.length;i++){
			if(i%2==0){
				$("#select_four").append("<option value='"+i+"' selected=true >"+arr[i]+"</option>");
			}else{
				$("#select_four").append("<option value='"+i+"'>"+arr[i]+"</option>");
			}
		}
		
		//批量选中 、批量移除选中
		setTimeout(function(){
			//移除选中所有id为基数的
			$("#select_four option").each(function(){
				if($(this).val()%2==0){
					$("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",false);
				}
			});
			//选中所有id为偶数的
			$("#select_four option").each(function(){
				if($(this).val()%2!=0){
					$("#select_four").find("option[value='"+$(this).val()+"']").attr("selected",true);
				}
			});
		},2000);
		
		//删除指定的option
		setTimeout(function(){
			$("#select_five").find("option[value='5']").remove();
			$("#select_five option[value='0']").remove();
		},2000);
		
	</script>
</html>