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

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+='i+'">'+arr[i]+'';
}
$("#select_two").html(oHtml);

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

//根据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+='i+'">'+arr[i]+'';
		}
		$("#select_two").html(oHtml);
		
		for(let i=0;i<arr.length;i++){
			if(arr[i]=="腾讯"){
				$("#select_three").append("+arr[i]+"");
			}else{
				$("#select_three").append("+arr[i]+"");
			}
		}
		//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("+arr[i]+"");
			}else{
				$("#select_four").append("+arr[i]+"");
			}
		}
		
		//批量选中 、批量移除选中
		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>

你可能感兴趣的:(WEB)