Home  >  Article  >  Web Front-end  >  How to achieve the moving effect of elements in the combo list box with JavaScript_javascript skills

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

WBOY
WBOYOriginal
2016-05-16 15:13:021804browse

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> 

6c04bd5ca3fcae76e30b72ad730ca86dCode:

<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>

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn