角色处理界面操作

最新推荐文章于 2023-12-05 12:00:40 发布

勤奋笨笨鸟

最新推荐文章于 2023-12-05 12:00:40 发布

阅读量531

点赞数

分类专栏： js 前端页面的坑

本文链接：https://blog.csdn.net/weixin_40098371/article/details/82708522

版权

前端页面的坑同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>水果选择</title>
	<style>
	select {
		width: 300px;
		height: 300px;
		color: block;
		background-color: lightblue;
	}
	</style>
</head>
<body>
	<!-- multiple = "multiple" 设置选项可以多选，不设置不可多选-->
	<select id="all" multiple = "multiple">
		<option >苹果</option>
		<option >桔子</option>
		<option >橙子</option>
		<option >西瓜</option>
		<option >水蜜桃</option>
	</select>
	<input type="button" id="btn1" value=">>" />
	<input type="button" id="btn2" value="<<" />
	<input type="button" id="btn3" value=">" />
	<input type="button" id="btn4" value="<" />
	<select id="select" multiple = "multiple"></select>
	<script>
	function $el(element){
		return document.getElementById(element);
	}
	var all =$el("all");
	var select =$el("select");
	
	$el("btn1").onclick = function() {
		// for(var i = all.children.length-1; i>=0; i--) 必须这样写，不能从0开始循环加，因为appendChlid后，左边的option的索引值会对应的改变。比如说修改后，左边的苹果的索引值为0 桔子索引值为1.但是进行过一次appendChild之后，桔子的索引值就变为0
		// for(var i = all.children.length-1; i>=0; i--){
		// 	var option = all.children[i];
		// 	select.appendChild(option);
		// 	// 此步骤完成后，选项的顺序反了
		// }
		    var allLen = all.children.length;
			for(var i = 0;i<allLen; i++){
			console.log(i);
			var option = all.children[0];
			select.appendChild(option);
		}
	}

	$el("btn2").onclick = function() {
		var selLen = select.children.length;
		for(var i = 0;i<selLen; i++){
			console.log(i);
			var option = select.children[0];
			all.appendChild(option);
		}
	}
	$el("btn3").onclick = function() {
		var allLen = all.children.length;
		var optSel = [];
		for(var i = 0;i<allLen; i++){
			//判断如果选项被选中个，就放到数组中
           if(all.children[i].selected){
           		optSel.push(all.children[i]);
                //放到数组后，将节点的状态修改为未选中，主要是防止添加到新select中后，此项还保留循环中的状态

           		all.children[i].selected = false;
           }
		}
		for(var i = 0;i<optSel.length; i++){
			console.log(i);
			var option = optSel[i];
			select.appendChild(option);
		}
	}
	$el("btn4").onclick = function() {

		var selLen = select.children.length;
		var optSel = [];
		for(var i = 0;i<selLen; i++){
           if(select.children[i].selected){
           		optSel.push(select.children[i]);
           		select.children[i].selected = false;
           }
		}
		for(var i = 0;i<optSel.length; i++){
			console.log(i);
			var option = optSel[i];
			all.appendChild(option);
		}
	}

	</script>
</body>
</html>