本文介绍了一个简单的HTML页面示例，通过两个下拉选择器实现元素的左右移动操作。利用JavaScript实现了从一个选择器中选取选项并移动到另一个选择器的功能。
<body>
<select id="s1" size="10" >
<option>红色</option>
<option>绿色</option>
<option>蓝色</option>
<option>黑色</option>
<option>白色</option>
</select>
<select id="s2" size="10" >
<option>苹果</option>
<option>香蕉</option>
<option>桃子</option>
<option>梨</option>
<option>橙子</option>
</select><br />
<input type="button" id="t1" value="右移" />
<input type="button" id="t2" value="左移" />
<script>
document.getElementById("t1").onclick=function(){ -----右移
var op=document.getElementById("s1").selectedOptions;---------将选中的数据赋值给op
document.getElementById("s2").appendChild(op[0]); ------表示选中的数据中索引值为0
document.getElementById("s1").removeChild(op[0]);
}
document.getElementById("t2").onclick=function(){ ----左移
var op=document.getElementById("s2").selectedOptions;
document.getElementById("s1").appendChild(op[0]);
document.getElementById("s2").removeChild(op[0]);
}
</script>
</body>
扫一扫
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
