How to achieve the moving effect of elements in the combo list box with JavaScript

How to achieve the moving effect of elements in the combo list box with JavaScript_javascript skills

WBOY

Release： 2016-05-16 15:13:02

Original

1803 people have browsed it

First of all, let me tell you the difference between combo box and list box:

Combo box includes the functions of list box and text box

Text box: only data can be entered

List box: only data can be selected

Combo box: can not only input data, but also select ``

Application background: There are two list boxes on the page, and the elements of one list box need to be moved to the other list box.

　 Basic idea of implementation:

(1) Write the init method to initialize the two list boxes;

(2) Add the onload event to the body to call the init method;

(3) Write move(s1,s2) to move the selected option in s1 to s2;

(4) Write moveAll(s1,s2) to move all options in s1 to s2.

　(5) Add onclick event for button.

javascript code is as follows:

<script type="text/javascript" language="javascript">
//对下拉框信息进行初始化
function init() {
for (i = ; i < ; i++) {
var y = document.createElement("option");//增加一个元素option
y.text = '选项' + i;
var x=document.getElementById("s");//根据ID找到列表框
x.add(y, null); //
}
}
//把选中的选项移到另一边
function move(s, s) {
var index = s.selectedIndex;
if (index == -) {
alert("没有选中值");
return;
}
s.length++;
s.options[s.length - ].value = s.options[index].value;
s.options[s.length - ].text = s.options[index].text;//s中当前选中的值赋给s的最后一个元素
s.remove(index);//从s中移除当前元素
}
//把一边的完全移到另一边
function moveAll(s, s) {
if (s.length == ) {
alert("没有可用选择");
return;
}
s.length = s.length + s.length;
for (var i = ; i < s.length; i++) {
s.options[s.length - s.length + i].value = s.options[i].value;
s.options[s.length - s.length + i].text = s.options[i].text;
}
s.length = ;
}
</script>

Copy after login

Code:

<body onload="init()">
<table>
<tr>
<td><select id="s" size= style="width:"></select></td>
<td><input type="button" name="moveToRight" value=">"
onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToRight" value=">>"
onClick="moveAll(s,s)"> <br> <input type="button"
name="moveToLeft" value="<" onClick="move(s,s)"> <br>
<br> <input type="button" name="moveAllToLeft" value="<<"
onClick="moveAll(s,s)"></td>
<td><select id="s" name="s" size= style="width:"></select></td>
</tr>
</table>
</body>

Copy after login

The above content introduces you to the knowledge about how JavaScript can realize the moving effect of elements in the combo list box. I hope it will be helpful to you!