要求:
>:将左侧被选中的第一个记录移动到右边(如果同时选中多次,只移动第一个)
>>:将左侧选中的所有记录移动到右边
>>>:将左侧的记录移动到右边
下面附上部分代码:
首先,需要导入以下插件:
<script type="text/javascript" src="jquery-confirm/jquery-confirm.js" ></script>
<link rel="stylesheet" href="boostrap/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<link rel="stylesheet" href="jquery-confirm/jquery-confirm.css" />
<script type="text/javascript" src="boostrap/bootstrap.min.js" ></script>
页面样式代码:
<tr>
<td>
//下拉列表1
<select id="left" class="selectpicker text-center" multiple style=" width: 150px; height: 220px;align-content: center;">
//下拉列表选项
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
</select>
</td>
<td class="text-center" style="width: 60px">
//6个功能按钮
<button id="right_one" style="width: 50px">></button>
<button id="right_double" style="width: 50px">>></button>
<button id="right_all" style="width: 50px">>>></button>
<button id="left_one" style="width: 50px"><</button>
<button id="left_double" style="width: 50px"><<</button>
<button id="left_all" style="width: 50px"><<<</button>
</td>
<td>
//下拉列表2
<select id="right" class="selectpicker text-center" multiple style=" width: 150px; height: 220px">
</select>
</td>
</tr>
对应按钮的功能
$(function(){
$("#right_one").click(function(){
$("#right").append($("#left option:selected:eq(0)"));
});
})
$(function(){
$("#right_double").click(function(){
$("#right").append($("#left option:selected"));
});
})
$(function(){
$("#right_all").click(function(){
$("#right").append($("#left option"));
});
})
$(function(){
$("#left_one").click(function(){
$("#left").append($("#right option:selected:eq(0)"));
});
})
$(function(){
$("#left_double").click(function(){
$("#left").append($("#right option:selected"));
});
})
$(function(){
$("#left_all").click(function(){
$("#left").append($("#right option"));
});
})