基于jquery实现select选择框内容左右移动添加删除代码分享

2020-05-27 18:14:46易采站长站整理

});

//双击选项
$('#select2').dblclick(function(){
$("option:selected",this).appendTo('#select1');
});

});
</script>
</head>
<body>
<div class="selectbox">
<div class="select-bar">
<select multiple="multiple" id="select1">
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</option>
<option value="资源管理员">资源管理员</option>
<option value="系统管理员">系统管理员</option>
<option value="超级管理员">超级管理员</option>
<option value="普通管理员">普通管理员</option>
<option value="信息发布员">信息发布员</option>
<option value="财务管理员">财务管理员</option>
<option value="产品管理员">产品管理员</option>
<option value="资源管理员">资源管理员</option>
<option value="A5源码">A5源码</option>
</select>
</div>

<div class="btn-bar">
<p><span id="add"><input type="button" class="btn" value=">" title="移动选择项到右侧"/></span></p>
<p><span id="add_all"><input type="button" class="btn" value=">>" title="全部移到右侧"/></span></p>
<p><span id="remove"><input type="button" class="btn" value="<" title="移动选择项到左侧"/></span></p>
<p><span id="remove_all"><input type="button" class="btn" value="<<" title="全部移到左侧"/></span></p>
</div>

<div class="select-bar">
<select multiple="multiple" id="select2"></select>
</div>
</div>
<div style="text-align:center;">
</div>
</body>
</html>

以上就是为大家分享的select选择框内容左右移动添加删除代码,希望大家可以喜欢。