亚欧乱色熟女一区二区三区,成人欧美一区二区三区在线观看 ,亚洲熟女乱色一区二区三区

首頁 > 博客列表 > JS-表單移動(dòng)選項(xiàng)卡特效

博主信息

博文 250

粉絲 3

評(píng)論 0

訪問量 381651

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		select{
			width:150px;
			height:200px;
			float:left;
			}
		div{
			width:100px;
			height:200px;
			float:left;
			}
	</style>
</head>
<body>
	<select name="" id="cid" multiple>
		<option value="0">琦琦</option>
		<option value="1">旺儒</option>
		<option value="3">三金</option>
		<option value="4">狗哥</option>
		<option value="5">金銘</option>
		<option value="6">想想</option>
		<option value="7">令鋒</option>
	</select>
	<div>
		<button onclick="func('cid','mid')">>>></button>
		<button onclick="func('mid','cid')"><<<</button>
	</div>
	<select name="" id="mid" multiple></select>
</body>
<script type="text/javascript">
	function func(id,id1){
		//邏輯關(guān)系
		//當(dāng)你點(diǎn)擊>>> obj 是cid
		//當(dāng)你點(diǎn)擊<<< obj 是mid
		obj = document.getElementById(id);
		//當(dāng)你點(diǎn)擊>>> obj1 是mid
		//當(dāng)你點(diǎn)擊<<< obj1是cid
		obj1 = document.getElementById(id1);
		//獲取到全部的select所有的option標(biāo)簽內(nèi)容，option是可以獲取到當(dāng)前對(duì)象下面所有的option標(biāo)簽的
		op = obj.options;
		//遍歷所有的option標(biāo)簽，得到option單獨(dú)的對(duì)象
		for(var i=0;i<op.length;i++){
			if(op[i].selected){
				//取消默認(rèn)選中的內(nèi)容
				op[i].selected = false;
				//移動(dòng)option標(biāo)簽
				obj1.add(op[i]);
				//因?yàn)槲覀兊臄?shù)組每次都要重新排序，所以我們只移動(dòng)第一個(gè)
				i--;
			}
		}
	}
</script>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例