项目要用到双select，这个完成：单个的在select之间左右异动，和全部的异动。最后以字符串的形式将需要的值提交：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>select 使用</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<!-- 这里放css -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--移动人员-->
//从左到右
function left_to_right(){
var selectText=$("#emp_left").find("option:selected").text();
var selectValue=$("#emp_left").val();
//检验左边select是否有选中
if (null==selectValue||selectValue=="") {
alert("请先选择左边的员工！");
return;
}else{
var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; // 填充右侧的值
$("#emp_right").append(selectop);
$("#emp_left option:selected").remove();
}
};
////从右到左
function right_to_left(){
var selectText=$("#emp_right").find("option:selected").text();
var selectValue=$("#emp_right").val();
//检验左边select是否有选中
if (null==selectValue||selectValue=="") {
alert("请先选择右边的员工！");
return;
}else{
var selectop = "<option value='"+selectValue+"'>"+selectText+"</option>"; // 填充右侧的值
$("#emp_left").append(selectop);
$("#emp_right option:selected").remove();
}
};
//全部从左到右
function all_left_to_right(){
var $options = $('#emp_left option');
$options.appendTo('#emp_right');
$('#emp_left option').remove();
}
//全部从右到左
function all_right_to_left(){
var $options = $('#emp_right option');
$options.appendTo('#emp_left');
$('#emp_right option').remove();
}
//提交,即将右边选框的所有员工提交
function submitMyForm(){
var subtext="";
$('#emp_right option').each(function() {
subtext += $(this).val()+',';
});
alert(subtext);
}
</script>
</head>
<body>
<table>
<tr>
<td align="right">
<select name="emp_left" id="emp_left" class="select_emp" size="30">
<option value="1" selected="selected">
111111111111
</option>
<option value="2" selected="selected">
22222222222
</option>
<option value="3" selected="selected">
3333333333333
</option>
<option value="4" selected="selected">
44444444444444
</option>
<option value="5" selected="selected">
5555555555555555
</option>
<option value="6" selected="selected">
66666666666666666666
</option>
<option value="7" selected="selected">
77777777777777777777777
</option>
</select>
</td>
<td>
</td>
<td valign="middle" align="center" class="btn_move">
<table>
<tr>
<td>
<img src="images/toright.jpg" style="cursor: pointer;"
onclick="left_to_right()" />
</td>
</tr>
<tr>
<td>
<img src="images/toleft.jpg" style="cursor: pointer;"
onclick="right_to_left()" />
</td>
</tr>
<tr>
<td>
<img src="images/alltoright.jpg" style="cursor: pointer;"
onclick="all_left_to_right()" />
</td>
</tr>
<tr>
<td>
<img src="images/alltoleft.jpg" style="cursor: pointer;"
onclick="all_right_to_left()" />
</td>
</tr>
<tr>
<td>
<img src="images/button_cancel.gif" style="cursor: pointer;" />
</td>
</tr>
<tr>
<td>
<img src="images/ok.gif" style="cursor: pointer;"
onclick="submitMyForm()" />
</td>
</tr>
</table>
</td>
<td>
</td>
<td>
<select name="emp_right" id="emp_right" class="select_emp" size="30">
<option value="8" selected="selected">
8888888888888888
</option>
</select>
</td>
</tr>
</table>
</body>
分享到：
相关推荐
**jQuery Select2组件详解** `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件，它在原生HTML `<select>` 元素的基础...通过熟练掌握其使用方法和配置选项，开发者可以轻松地提升下拉菜单的交互性和美观度。
五、使用方法与示例 要使用jQuery超级Select插件v4.0，首先需要在项目中引入jQuery库和插件文件。然后，通过jQuery选择器找到要替换的Select元素，并调用`.superSelect()`方法初始化插件。你可以传递配置对象来定制...
- **方法调用**：介绍如何使用Select2提供的API方法，如打开、关闭、清空选择等。 在压缩包`select2-4.0.0`中，通常包含了Select2库的JavaScript文件、CSS文件、图片资源以及示例代码。开发者需要将这些资源正确...
总的来说，掌握jQuery操作select的方法对于前端开发来说是非常实用的技能，它能够提高代码的效率和可读性，同时为用户带来更好的交互体验。通过学习这篇博客和提供的文件，开发者可以深化对jQuery操作select的理解，...
本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框，以提升用户在交互时的体验。 首先，我们需要了解 `select` 元素在HTML中的基本用法。`<select>` 标签用于创建一个下拉列表，用户可以...
可以使用 `$("#select_id option[text='jQuery']").attr("selected", true)` 方法设置 Select 的 Text 值为 jQuery 的项选中。 三、 jQuery 添加/删除 Select 的 Option 项 jQuery 也提供了方法来添加或删除 ...
使用jQuery模拟`<select>`效果，我们可以创建一个无序列表`<ul>`，然后用`<li>`元素作为可选的项目。这样可以自由定制样式，甚至添加复杂的交互效果。以下是一个基本的HTML结构示例： ```html ;"> ...
二、使用方法与示例 1. **基础应用**：首先，需要在页面中引入jQuery库和Select2库的CSS及JS文件。然后，通过`$('select').select2()`初始化选择器。 ```html <link href="https://cdn.jsdelivr.net/npm/select2@4...
接着，通过JavaScript或者jQuery选择器找到需要美化的`<select>`元素，并调用插件方法。例如： ```javascript $(document).ready(function() { $('select').selectlist(); }); ``` 在实际开发中，开发者可能还...
要使用jQselect.js，你需要在页面中引入jQuery库和该插件的脚本文件，然后通过jQuery的选择器找到要美化的目标`<select>`元素，并调用相应的初始化方法。例如： ```html <script src="path/to/jquery.min.js"> ...
4. 在页面加载完成后，调用`.select2()`方法启动插件。 通过以上介绍，我们可以看到jQuery Select2插件的强大之处，它不仅提升了用户体验，也为开发者提供了丰富的定制选项，是构建现代Web应用时不可或缺的一个工具...
本文将详细介绍 `SelectMenu.js` 的核心特性和使用方法。 ### 1. 插件简介 `SelectMenu.js` 是一个轻量级的解决方案，旨在替代传统的 `<select>` 元素，以提供更美观、功能更丰富的用户体验。这个插件可以将任何 `...
- 在使用jQuery Mobile Select Menu时，确保页面结构遵循jQuery Mobile的页面模型，即每个页面都包含在一个`<div data-role="page">`内。 - 为了性能考虑，避免在大型`<select>`元素上使用增强样式，因为这可能导致...
在HTML结构中，我们可以用一个普通的`<select>`元素作为基础，然后通过jQuery选择器找到这个元素，调用插件的方法将其转换为我们需要的模拟下拉框。例如： ```html <select id="customSelect"> 选项1 选项2 选项...
本压缩包提供了一种使用jQuery模拟Select下拉菜单的方法，它不仅可以实现基本的下拉功能，还能增强用户体验，如添加动画效果、自定义样式等。 jQuery是一款轻量级的JavaScript库，它的目标是使JavaScript编程变得更...
`README.md`文件通常包含了项目的介绍、使用方法和开发者指南，对于理解和使用`jquery.easydropdown.min.js`非常有帮助。而`www.jq22.com.txt`可能是一个链接或引用，指向更多jQuery相关的资源和教程。 总结来说，`...
4. **API 和事件**：`jquery.editable-select` 提供了一系列 API 方法和事件，允许开发者自定义其行为。例如，你可以通过 API 设置或获取选中项，监听用户输入或选择变化的事件，甚至可以添加或移除选项。 5. **...
然后，调用`jquery.select.js`提供的方法将其转换为自定义下拉效果。例如，可以使用`.selectBoxIt()`方法： ```javascript $(document).ready(function() { $("#yourSelectId").selectBoxIt(); }); ``` 在这个...
此为jquery.editable-select插件的使用案例，这是一款非常好用的插件，好用之处：既可下拉框选择也可手动输入，而且手动输入还能对下拉框选项进行过滤，而且还可实现一些相关事件，具体请查看官方文档。
本文将详细讨论如何使用jQuery来实现这一功能，同时提供一个自编的简单实用的模拟select效果的代码示例。 首先，让我们理解原生HTML `select` 元素的基本功能。`<select>` 元素用于创建一个下拉列表，用户可以从中...