jQuery实现select多选框左右添加,包括双击事件
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" size="10" multiple="multiple" class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
<script type="text/javascript">
$("#add").click(function(){
$("#first option").each(function(){
if(this.selected==true){
$("#second").append(this);
}
});
});
$("#add_all").click(function(){
$("#first option").each(function(){
$("#second").append(this);
});
});
$("#remove").click(function(){
$("#second option").each(function(){ if(this.selected==true){
$("#first").append(this);
}
});
});
$("#remove_all").click(function(){
$("#second option").each(function(){ $("#first").append(this);
});
});
$("#first").dblclick(function(){
$("#first option").each(function(){
if(this.selected==true){
$("#second").append(this);
}
});jquery ajax例子
});
</script>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论