在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的双Select框多选表单，以便用户可以方便地在两个下拉列表之间选择和移动选项，并在提交表单时发送选定的数据。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互等任务。
我们需要理解HTML基础结构。在`index.html`文件中，通常会包含两个`<select>`元素，每个元素都有`multiple`属性，以允许用户进行多选。例如：
```html
<select id="select1" multiple>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<!-- 更多选项... -->
</select>
<select id="select2" multiple>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<!-- 更多选项... -->
</select>
<button id="submitBtn">Submit</button>
```
接下来，我们引入jQuery库，这里使用的是`jquery-1.3.2.min.js`。虽然这个版本相对较旧，但仍然可以工作。在`<head>`标签内添加以下代码：
```html
<script src="jquery-1.3.2.min.js"></script>
```
为了实现双Select框之间的交互，我们需要编写jQuery脚本。我们可以添加一个按钮，当点击时，将一个Select框中的选中项移动到另一个Select框。例如：
```javascript
$(document).ready(function() {
$("#moveLeft").click(function() {
moveOptions($("#select2"), $("#select1"));
});
$("#moveRight").click(function() {
moveOptions($("#select1"), $("#select2"));
});
});
function moveOptions(source, target) {
source.find(":selected").each(function() {
target.append($(this).clone()).val($(this).val());
$(this).remove();
});
}
```
在这个例子中，`moveOptions`函数接收两个参数，分别是源Select框和目标Select框。它遍历源Select框中所有选中的选项，将它们复制到目标Select框并删除原选项。
至于表单提交，当用户点击“Submit”按钮时，我们希望获取两个Select框中所有选中的值。这可以通过遍历每个`<select>`元素的`:selected`选项并收集其值来完成：
```javascript
$("#submitBtn").click(function(e) {
e.preventDefault(); // 阻止默认表单提交行为
var selectedValues = [];
$("#select1 option:selected, #select2 option:selected").each(function() {
selectedValues.push($(this).val());
});
console.log("Selected values:", selectedValues); // 打印选定值
});
```
以上代码中，`e.preventDefault()`用于防止页面刷新，然后我们通过jQuery遍历两个Select框中的选中项，将值添加到数组`selectedValues`中。这些值可以发送到服务器进行处理。
总结一下，本文介绍了如何使用jQuery实现一个双Select框多选功能，并在表单提交时获取选定的值。这个功能在需要用户从多个选项中进行多重选择的场景中非常实用，例如在数据过滤、分类或配置设置等场景。通过结合HTML、CSS和jQuery，我们可以创建具有交互性和用户体验友好的Web应用。
Jquery实例—双Select框互动选择.rar （2个子文件） 
index.html 3KB
jquery-1.3.2.min.js 56KB
