＜select＞标签多选纯JS

最新推荐文章于 2024-05-15 15:39:09 发布

努力比遗憾轻松

最新推荐文章于 2024-05-15 15:39:09 发布

阅读量1k

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44775370/article/details/118972521

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标签多选纯JS

<html>
<head>
<title></title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<select id='checkedLevel' multiple="true">
　　　　<option value="1">选项1</option>
　　　　<option value="2">选项2</option>
　　　　<option value="3">选项3</option>
　　　　<option value="4">选项4</option>
　　　　<option value="5">选项5</option>
　　　　<option value="6">选项6</option>
　　　　<option value="7">选项7</option>                                                                                                                                                           
　　</select>  
<p id="k"></p> 
<script>
	var p = [];
	function outPut(){
		//获取dom元素
		var a = document.getElementById("checkedLevel");
		//纯js的select只能循环获取子标签元素的值
		for(var i=0;i<a.length;i++){
			var b = a[i];
			//是选中元素添加到数组中
			if(b.selected){
				var flage = true;
				//避免已选中元素重复添加
				for(var j=0;j<p.length;j++){
						if(b.value === p[j]){
							flage = false;
						}
				}
				if(flage){
					p.push(b.value);
				}
			}else{
				//移除未选中元素
				for(var j=0;j<p.length;j++){
					if(b.value === p[j]){
						p.splice(j,1);
					}
				}
			}
		}
		//把数组放到P标签中展示
		document.getElementById("k").innerHTML = p;
	}
	//select元素的值发生改变触发
	document.getElementById("checkedLevel").onchange = outPut;
</script>
</body>
</html>

努力比遗憾轻松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜select＞标签多选纯JS

标签多选纯JS<html><head><title></title><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><select id='checkedLevel' multiple="true">　　　　<option value="1">选项1</op
复制链接

扫一扫