您的位置：首页 > Web前端 > JavaScript

javascript select控件的使用及左右移动item的逻辑处理

2016-09-17 21:47 204 查看

html

中

select

控件，应该也就是下拉选项框。不过也可以不是下拉的形式，可以是多行显示的。

这里演示的是，左边一个下拉多选框，右边还有一个下拉多选框。然后，双击左边的下拉多选框的条目，就将其移到右边的下拉多选框中，右边的同理。

还有就是，左边的内容一键移到右边，和右边的一键移到左边的操作。

ps:我感觉

javascript

最方便的一点就是，可以直接在

html

或者说浏览器中运行，不需要特别的运行环境，验证起来特别方便。

这里有一个栗子：

假设

html

是这样的：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>

<div
style="border: 1px dashed #E6E6E6; margin: 150px 0px 0px 450px; width: 350px; height: 200px; background-color: #E6E6E6;">
<table width="285" height="169" border="0" align="left"
cellpadding="0" cellspacing="0" style="margin: 15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> <select
name="first" multiple="multiple" size=10 class="td3" id="s">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle"><input name="add" id="add"
type="button" class="button" value="-->" /> <input name="add_all"
id="add_all" type="button" class="button" value="==>" /> <input
name="remove" id="remove" type="button" class="button"
value="<--" /> <input name="remove_all" id="remove_all"
type="button" class="button" value="<==" /></td>
<td width="127" align="left"><select name="second" size="10"
multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">

</script>
</html>

然后

js

的代码可以是这样的：

<script type="text/javascript">

// 左右两边的select
var leftSelect = document.getElementById("s");
var leftItems = leftSelect.children;
var rightSelect = document.getElementById("second");
var rightItems = rightSelect.children;
var selectedItems = [];

// 4个 按钮
// 01 -> left2right selected
document.getElementById("add").onclick = function () {
// todo
selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
for (var i = 0; i < leftItems.length; i++) {
var item = leftItems[i];
if (item.selected) {
selectedItems.push(item);
}
}
for (var j = 0; j < selectedItems.length; j++) {
rightSelect.appendChild(selectedItems[j]);
//            leftSelect.removeChild(selectedItems[j]); todo ->为什么左边的不需要移除呢？
}
};
// 02 -> left2right all
document.getElementById("add_all").onclick = function () {
// todo
selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
//        alert(selectedItems.concat(selectedItems,leftItems).length); // todo ->为什么添加之后长度只是1？
for (var i = 0; i < leftItems.length; i++) {
var item = leftItems[i];
selectedItems.push(item);
}
for (var j = 0; j < selectedItems.length; j++) {
rightSelect.appendChild(selectedItems[j]);
}
};
// 03 -> right2left  selected
document.getElementById("remove").onclick = function () {
// todo

selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
for (var j = 0; j < rightItems.length; j++) {
var item = rightItems[j];
if (item.selected) {
selectedItems.push(item);
}
}

for (var i = 0; i < selectedItems.length; i++) {
leftSelect.appendChild(selectedItems[i]);
}
};
// 04 -> right2left  all
document.getElementById("remove_all").onclick = function () {
// todo
selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
for (var j = 0; j < rightItems.length; j++) {
var item = rightItems[j];
selectedItems.push(item);
}
for (var i = 0; i < selectedItems.length; i++) {
leftSelect.appendChild(selectedItems[i]);
}
};

// 双击事件
leftSelect.ondblclick = function () {
// 左边select控件的双击事件
//        alert(leftSelect.selectedIndex);
rightSelect.appendChild(leftItems[leftSelect.selectedIndex]);
};

rightSelect.ondblclick = function () {
leftSelect.appendChild(rightItems[rightSelect.selectedIndex]);
};

</script>

运行效果就是开头描述的样子。在谷歌/火狐浏览器中运行正常。

end.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航