不按Ctrl键实现select标签多选操作

最新推荐文章于 2021-12-01 21:17:08 发布

原创最新推荐文章于 2021-12-01 21:17:08 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #select #多选

前端开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的下拉菜单示例，包括如何初始化选择项、显示和隐藏下拉框以及获取和设置选项值等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html onclick="hide();">
<body>
	<div onclick="show(event);">
		<div id="r">选取结果</div>
		<div id="s" style="position: absolute; display: none; z-index: 1;">
			<select id="sr" multiple="multiple" style="width: 100px;" onclick="oSele_onclick(this);">
				<option value="volvo">volvo</option>
				<option value="saab">saab</option>
				<option value="opel">opel</option>
				<option value="audi">audi</option>
			</select>
		</div>
	</div>
	<script>
		var arr = new Array();
		//初始选项值和方法	开始
		var initText = "saab,opel";
		function init() {
			var oSele = document.getElementById("sr");
			var str = initText;
			for (i = 0; i < oSele.length; i++) {
				if (("," + str + ",").indexOf("," + oSele.options[i].text + ",") != -1) {
					oSele.options[i].selected = true;
					arr[i] = oSele.options[i].value;
				} else {
					arr[i] = "";
				}
			}
		}
		init();
		//初始选项值和方法	结束

		//隐藏下拉框
		function hide() {
			document.getElementById("s").style.display = "none";
			console.log(selectMultiple("sr"));
			document.getElementById("r").innerHTML = selectMultiple("sr");
		}

		//显示下拉框
		function show(e) {
			e.stopImmediatePropagation();//阻止冒泡事件发生
			document.getElementById("s").style.display = "";
		}

		//获取选项值
		function selectMultiple(id) {
			var oSele = document.getElementById(id);
			var str = "";
			for (i = 0; i < oSele.length; i++) {
				if (oSele.options[i].selected) {
					str += oSele.options[i].value + ",";
				}
			}
			if (str == "") {
				return "请选择";
			} else {
				return str.substr(0, str.length - 1);
			}
		}

		//获取数组值
		function arrayString(str) {
			var str = "";
			for (i = 0; i < arr.length; i++) {

				str += arr[i] + ",";

			}
			return str
		}

		//设置选项值
		function oSele_selected(oSele) {
			var str = arrayString(arr);
			for (i = 0; i < oSele.length; i++) {
				if (("," + str).indexOf("," + oSele.options[i].text + ",") != -1) {
					oSele.options[i].selected = true;
				} else {
					oSele.options[i].selected = false;
				}
			}
		}

		//点击事件
		function oSele_onclick(oSele) {
			var i = oSele.selectedIndex;

			if (arr[i] == undefined || arr[i] == "") {
				arr[i] = oSele.value;
			} else {
				arr[i] = "";
			}

			oSele_selected(oSele);
		}
	</script>
</body>
</html>