前端開發(fā)中常常需要使用下拉列表，而下拉列表的功能也是多種多樣的。其中一種就是左右選擇功能的下拉列表，這種下拉列表能夠讓用戶輕松地將某些選項從左邊移到右邊，或者反之。
比如，一個網(wǎng)站需要用戶進(jìn)行篩選操作，用戶需要從所有的選項中選出自己想要的選項，就可以通過左右選擇的下拉列表來實現(xiàn)。
代碼的實現(xiàn)方法如下：
以上代碼通過HTML和JavaScript實現(xiàn)了左右選擇的下拉列表功能。在HTML中，我們使用了兩個
比如，一個網(wǎng)站需要用戶進(jìn)行篩選操作，用戶需要從所有的選項中選出自己想要的選項，就可以通過左右選擇的下拉列表來實現(xiàn)。
代碼的實現(xiàn)方法如下：
<select id="selectLeft" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button id="toRight">>></button>
<button id="toLeft"<<<</button>
<select id="selectRight" multiple></select>
<script>
var selectLeft = document.getElementById("selectLeft");
var selectRight = document.getElementById("selectRight");
var toRight = document.getElementById('toRight');
var toLeft = document.getElementById('toLeft');
var length = selectLeft.options.length;
for(var i = 0; i < length; i++){
selectLeft.options[i].onclick = function(){
this.selected = true;
}
}
toRight.onclick = function(){
for(var i = length-1; i >= 0; i--){
if(selectLeft.options[i].selected){
selectRight.insertBefore(selectLeft.options[i], selectRight.firstChild);
}
}
}
toLeft.onclick = function(){
for(var i = selectRight.options.length-1; i >= 0; i--){
if(selectRight.options[i].selected){
selectLeft.insertBefore(selectRight.options[i], selectLeft.firstChild);
}
}
}
</script>以上代碼通過HTML和JavaScript實現(xiàn)了左右選擇的下拉列表功能。在HTML中，我們使用了兩個