Forward:
Jian 最近在做毕业设计
其中一个前台页面操作是点选某个 select 中 option 后可以添加到另一个 select 中
点选第二个 select 又可以将选中的 option 移除
Code:
不说其它了,还是直接贴代码吧
当然,得首先确保有正确的 js
// 左侧增加到右侧
function toAdd() {
var selectObject = $("#myselect").val(); // 取得左侧所选取的值
if (null==selectObject) {
alert("【Jian's tips】您未选择任何可以添加的内容!");
return;
}
var content = "<option value='"+selectObject+"'>"+selectObject+"</option>"; // 填充右侧的值
$("#myresult").append(content);
selectChange(); // 最后调用 selectChange()模拟onChange()事件, 主要是为了能够及时地将禁用的添加按钮重新激活(如果有必要)
}
// 右侧移除
function toRemove() {
var removeObject = $("#myresult option:selected").val(); // 取得右侧要移除的内容, 注意可多选
if (null==removeObject) {
alert("【Jian's tips】您未选择任何要删除的内容!");
return;
}
$("#myresult option:selected").remove();
selectChange(); // 与toAdd()中调用原理一致
}
</script>
</head>
<body>
<p style="color:#F60; size:auto">author: Jian</p>
<select style="width:100px" id="myselect" size="5" onchange="selectChange()">
<option value="曹操">曹操</option>
<option value="刘备">刘备</option>
<option value="孙权">孙权</option>
</select>
<input id="addBT" name="addBT" type="button" value="添加" onclick="toAdd()"/>
<input id="rmBT" name="rmBT" type="button" value="移除" onclick="toRemove()"/>
<select style="width:100px" size="5" multiple="MULTIPLE" id="myresult">
</select>
</body>
Conclusion:
这里说明下,因为 Jian 的需求是:左侧的值是数据库中存储的,而且是对应不同分类有不同值,所以设计成为按钮禁用与激活的形式
有的 Demo 实现的效果是将左侧数据点击增加后,左侧中会移除,右侧添加
而右侧移除后,又会将数据还原为左侧
虽然 Jian 没有写这个效果,但是如果是静态数据的话应该不难
by the way, 填充数据时,option 的 value 与 text 属性可以自由设定,就不多说了
Confusion:
还是那个问题,如果是从数据库动态的数据,如何实现 左侧添加-->消失-->右侧移除-->还原 的效果
特别是,当左侧的 select 也是动态生成的,而且不止一个,那...