JavaScript如何实现组合列表框中元素移动效果
首先给大家说下组合框和列表框的区别：
组合框包括列表框和文本框的功能
文本框：只能输入数据
列表框：只能选择数据
组合框：既能输入数据，又能选择``
应用背景：在页面中有两个列表框，需要把其中一个列表框的元素移动到另一个列表框 。
实现的基本思想：
（1）编写init方法对两个列表框进行初始化；
（2）为body添加onload事件调用init方法；
（3）编写move（s1,s2）把s1中选中的选项移到s2;
（4）编写moveAll（s1,s2）把s1中所有的选项都移到s2.
（5）为按钮添加onclick事件。
javascript代码如下：
<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>
<body>代码：
<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>
以上内容给大家介绍了JavaScript如何实现组合列表框中元素移动效果的相关知识，希望对大家有所帮助！
-
本文向大家介绍JavaScript实现移动端拖动元素，包括了JavaScript实现移动端拖动元素的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现移动端拖动元素的具体代码，供大家参考，具体内容如下 实现效果： 请切换到移动端页面查看！ 代码实现： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
问题内容： 假设我有3个列表：[‘q’，’w’]，[‘a’，’s’]，[‘z’，’x’]。如何从这些列表中获取可能的组合列表？所以我得到一个列表[[‘q’，’a’，’z’]，[‘q’，’s’，’z’]]等。我为两个方法创建了一个方法，但对N个列表却找不到一个方法： 我发现这是由番石榴的Sets.cartesianProduct完成的。 问题答案： 您需要N个嵌套循环，这使它变得很难。 您可以使用递
-
我想要一个列表，它是列表元素列表的组合，例如：我的输入 输出应该是 非常感谢您的帮助。
-
本文向大家介绍JS HTML5实现拖拽移动列表效果，包括了JS HTML5实现拖拽移动列表效果的使用技巧和注意事项，需要的朋友参考一下 练习HTML5中的拖放API，实现列表拖拽移动！参考文章：JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路： 1.循环设置每个子项的draggable属性，以及设置拖动标记（不会多个或全部子项都移动） 2.每次进入投放区，则检测时候有拖放标记，
-
本文向大家介绍JavaScript如何实现元素全排列实例代码，包括了JavaScript如何实现元素全排列实例代码的使用技巧和注意事项，需要的朋友参考一下 排列 (Permutation / Arrangement) 概念 n 个不同元素中任意选取 m (m <= n) 个元素进行排列，所有排列情况的个数叫做 排列数，其值等于： ! 表示数学中的阶乘运算符，可以通过以下函数实现： 当 n = m
-
现在我想实现这样一个效果，父元素是红色的框，然后里面有很多子元素，我想要这些子元素在父元素成两行排列，且初始的时候超出部分是隐藏的，然后在父元素的容器出出现一个省略号的按钮，点击这个省略号按钮，隐藏部分出现，出现横向滚动条 如上