下面是一个使用jQuery实现的下拉框左右选择(通常用于从一个列表选择项目移动到另一个列表)的简单实例。这个示例假设你有两个`
HTML 部分:
<select id="source" multiple size="5">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
</select>
<button id="add">添加到右侧</button>
<button id="remove">移除到左侧</button>
<select id="target" multiple size="5"></select>
CSS 部分(可选,用于美化界面):
select {
margin: 10px;
}
button {
margin: 10px;
padding: 5px 10px;
}
jQuery 部分:
$(document).ready(function() {
// 将选定的项从左侧添加到右侧
$('#add').click(function() {
$('#source option:selected').each(function() {
$(this).remove().appendTo('#target');
});
});
// 将选定的项从右侧移回左侧
$('#remove').click(function() {
$('#target option:selected').each(function() {
$(this).remove().appendTo('#source');
});
});
});
这段代码首先定义了HTML结构,包含两个`
请注意,此示例假设用户可以通过`Ctrl`(或`Command`在Mac上)和点击来选择多个选项。`multiple`属性在`