jQuery简单实现权限选择

Html

Css

Js

北京
河南
福州
陕西
河北
天津
甘肃
宁夏
新疆
青海
海南
安徽
山东
云南
贵州
四川

select { height:300px; width:200px; border:20px solid #0094ff; }

$(function() { //为全部右移绑定事件 $("#btnRightAll").click(function() { $("#selectLeft").children().appendTo($("#selectRight")); }); //为选中右移绑定事件 $("#btnRight").click(function() { $("#selectLeft option:selected").appendTo($("#selectRight")); }) //为选中左移绑定事件 $("#btnLeft").click(function() { $("#selectLeft ").append($("#selectRight option:selected")); }) //为全部左移绑定事件 $("#btnLeftAll").click(function() { $("#selectLeft ").append($("#selectRight").children()); }) })

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.4

选中左侧select下的option后，点击按钮移动到右侧select，反之亦然！我用的是jQuery3.2.1，实际jQuery2.1.4也可以实现效果！