权限选择
作者:李永健
撰写时间:2019年 1月20日
开发工具与关键技术: Jquery 、C#MVC
html中的代码:
<script src="~/Content/js/jquery-1.7.1.min.js"></script>
<select id="selectLeft"multiple="multiple">
<option>南沙</option>
<option>广州</option>
<option>深圳</option>
<option>茂名</option>
</select>
<input type="button"id="btnRightAll"value=">>"/>
<input type="button" id="btnRight" value=">" />
<input type="button" id="btnLeft" value="<" />
<input type="button" id="btnLeftAll" value="<<" />
<select id="selectRight"multiple="multiple"></select>
view层的代码:
$(function () {
//为“全部右移”按钮绑定事件
$("#btnRightAll").click(function () {
//获取所有子元素,追加到右边的select中
$("#selectLeft").children().appendTo("#selectRight");
});
//为“选中右移”按钮判定事件
$("#btnRight").click(function () {
//获取到所有被选中的option
$("#selectLeft :selected").appendTo("#selectRight");
});
//为“全部左移”按钮判定事件
$("#btnLeftAll").click(function () {
//获取右侧所有的option
$("#selectRight").children().appendTo("#selectLeft");
});
//为“选中左移”按钮判定事件
$("#btnLeft").click(function () {
//获取右侧选中的项,加到左边
$("#selectLeft").append($("#selectRight :selected"));
})
})
如下效果图: