在项目开发中,我们经常会遇到从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作。在很多系统中应用比如说求职网站的选择意向工作地区,QQ好友管理添加好友到组。
双向下拉实现需求:
<ul class="ul_demo"> <li>通过左右按钮向右侧列表框添加项或移除项操作。</li> <li>通过双击两边列表框里的项可以进行添加或移除项。</li> <li>获取右侧列表框里的选项值。</li> </ul>
HTML
<div class="select_side">
<p>待选区</p>
<select id="selectL" name="selectL" multiple="multiple">
<option value="13800138000">王新安 - 13800138000</option>
<option value="13800138001">李密 - 13800138001</option>
<option value="13800138002">姜瑜 - 13800138002</option>
<option value="13800138002">钱书记 - 13800138004</option>
</select>
</div>
<div class="select_opt">
<p id="toright" title="添加">></p>
<p id="toleft" title="移除"><</p>
</div>
<div class="select_side">
<p>已选区</p>
<select id="selectR" name="selectR" multiple="multiple">
</select>
</div>
<div class="sub_btn"><input type="button" id="sub" value="getValue" /></div>
jQuery
$(function() {
var leftSel = $("#selectL");
var rightSel = $("#selectR");
$("#toright").bind("click",
function() {
leftSel.find("option:selected").each(function() {
$(this).remove().appendTo(rightSel);
});
});
$("#toleft").bind("click",
function() {
rightSel.find("option:selected").each(function() {
$(this).remove().appendTo(leftSel);
});
});
leftSel.dblclick(function() {
$(this).find("option:selected").each(function() {
$(this).remove().appendTo(rightSel);
});
});
rightSel.dblclick(function() {
$(this).find("option:selected").each(function() {
$(this).remove().appendTo(leftSel);
});
});
$("#sub").click(function() {
var selVal = [];
rightSel.find("option").each(function() {
selVal.push(this.value);
});
selVals = selVal.join(",");
//selVals = rightSel.val();
if (selVals == "") {
alert("没有选择任何项!");
} else {
alert(selVals);
}
});
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791