<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>双下拉多选列表</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
//选择功能
function tianjiafn(){
$("#set1 option:selected").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option:selected").remove();
}
//移除功能
function yichufn(){
$("#set2 option:selected").each(function(){
$("#set1").prepend("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option:selected").remove();}
//添加全部
function tjqbfn(){
$("#set1 option").each(function(){
$("#set2").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set1 option").remove();
}
//移除全部
function ycqbfn(){
$("#set2 option").each(function(){
$("#set1").append("<option value='"+$(this).attr("value")+"'>"+$(this).text()+"</option>");
});
$("#set2 option").remove();
}
//测试确定
function csqd(){
var tmp='';
$("#set2 option").each(function(){tmp+=$(this).text()+$(this).val()+"\n";});
alert(tmp);
}
//加载事件
$(function(){
//选择按钮事件、左边双击事件
$("#xuanze").bind("click",tianjiafn);
$("#set1").bind("dblclick",tianjiafn);
//移除按钮事件、右边双击事件
$("#yichu").bind("click",yichufn);
$("#set2").bind("dblclick",yichufn);
//添加全部
$("#tjqb").bind("click",tjqbfn);
//删除全部
$("#ycqb").bind("click",ycqbfn);
});
</script>
</head>
<body style="text-align: center;margin:0px;padding:0px;">
<form id="myForm" name="myForm">
<table border="1" align="center">
<tr>
<td>
<select id="set1" multiple="multiple" style="height: 200px; width: 200px;"
size="10">
<option value="1" class="1">
主汽压力</option>
<option value="2" selected class="2">
主汽温度 </option>
<option value="3" class="3">
机真空度 </option>
<option value="4" class="4">
机排烟温度 </option>
<option value="5" class="5">
炉汽包水位 </option>
<option>厂用电率</option>
<option>再热汽温</option>
<option>凝汽器真空</option>
<option>补水率</option>
<option>排烟温度</option>
<option>烟气含氧量</option>
<option>凝汽器端差</option>
<option>炉膛负压</option>
<option>汽包水位</option>
<option>各条母线电压</option>
<option>发电机风温</option>
<option>氢气露点湿度</option>
<option>分离器出口温度</option>
<option>回料器立管压力</option>
</select>
</td>
<td><table align=center>
<tr>
<td><input id = "xuanze" type=button value='选择'/>
</td>
</tr>
<tr>
<td><input id="yichu" name="button32" type=button value='移除'/></td>
</tr>
<tr>
<td><input id="tjqb" type=button value='添加全部'/></td>
</tr>
<tr>
<td><input id="ycqb" type=button value='移除全部'/></td>
</tr>
</table>
</td>
<td>
<select id="set2" style="height: 200px; width:200px;" size="10"
name="courseIds" multiple="multiple">
</select>
</td>
</tr>
</table>
<br />
<input type="button" value="确定" onclick="csqd();" />
<input type="button" value="重选" onClick="$('#ycqb').click()"/>
</form>
</body>
</html>
分享到：
相关推荐
jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable jQuery下拉列表select美化插件jQselectable
总结来说，`selectBox`是jQuery生态系统中的一个强大工具，它为下拉列表提供了丰富的定制选项和交互体验。通过熟练掌握和应用这个插件，开发者可以创建出更加现代、用户体验优秀的网页应用。同时，`selectBox`也体现...
本主题将探讨如何利用jQuery实现一个特定的功能——“select下拉列表根据radio选项级联”。这个功能常用于创建动态表单，其中，用户选择一个radio按钮后，相关的select下拉列表会自动更新其选项，以提供与所选radio...
而“jQuery下拉列表框双向选择”则涉及到一种交互设计，允许用户在一个下拉列表中选择项，并同时将这些选择同步到另一个相关的下拉列表中，实现数据的双向同步。 要实现这样的功能，我们需要理解以下几个关键知识点...
这些插件提供了丰富的自定义选项，能够轻松地改变下拉列表的外观和行为。以`Select2`为例，它允许我们设置选择框的宽度、字体、颜色、边框等样式，并且支持搜索、多选等功能。 1. **安装与引入插件**：首先，你需要...
本文将深入探讨“jquery双向选择器两侧select框列表文字左右选择器代码”，这是一种常见于网页表单设计的功能，用于实现两个下拉列表（select框）之间的双向同步选择。 首先，我们需要理解jQuery的选择器。jQuery...
`<select>` 标签用于创建一个下拉列表，用户可以从中选择一个或多个选项。然而，原生的 `select` 元素并不支持模糊搜索功能，所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**： 在项目中，你...
jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击滑动下拉列表菜单 jquery select css3鼠标点击...
jQuery Stylish Select 是一款jQuery Select下拉列表外观自定义插件,把Select下拉框美化成圆角的样式,另外颜色也不一样了,下拉列表中每个item的背景色也添加了.本Select美化用到了jquery了，在最新的jquery版本下未...
`div模拟select自定义下拉列表框`是一种常见做法，它利用JavaScript（如jQuery）和CSS来实现，可以提供比原生`<select>`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...
1. **模糊搜索**：用户在输入框中输入关键词，插件会实时更新下拉列表，显示与关键词匹配的选项，实现快速定位。 2. **可定制化**： Combo Select 允许开发者自定义样式和行为，如改变提示文字、设置搜索框样式、...
在这个场景中，我们将讨论如何使用jQuery实现级联下拉列表。 首先，我们需要理解`$().related`这个函数是jQuery的一个插件方法，它用于创建级联效果。在描述中给出的示例代码`$().related({S1:"s1", S2:"s2", S3:...
- **搜索功能**：用户可以在下拉列表中输入关键词进行筛选，提高选择效率。 - **多选**：通过设置`multiple`属性，`Select2`可以支持多选模式。 - **自定义数据源**：除了绑定HTML `<option>`元素，`Select2`还能从...
select3是一款基于jQuery或Zepto.js的轻量级模块化select下拉列表框插件。select3下拉列表框可以进行单选、以tag的形式进行多选、可以指定输入类型格式、可以进行分组选择、还可以ajax进行远程调用。
jq重置select下拉列表 在网页开发中，select下拉列表是一种常用的表单控件，用于让用户从多个选项中选择一个或多个选项。然而，在某些情况下，我们需要重置select下拉列表，以便在不同的场景下显示不同的选项或清空...
通过JQuery库，我们可以轻松地与这些下拉列表进行交互，实现诸如获取选中值、设置选中项等功能。 #### 一、获取当前选中的值 在JQuery中，可以通过`val()`方法来获取下拉列表当前选中的值： ```javascript // ...
3. **checkselect.js**：这是一个JavaScript文件，将包含我们自定义的jQuery扩展方法，用于实现下拉列表复选框的功能。 在`checkselect.js`中，我们可能要做的事情包括： - 选择HTML中的下拉列表元素（`<select>`）...
**jQuery和CSS3超赞Select下拉列表框美化插件详解** 在网页设计中，Select元素通常是用来创建下拉选择菜单的，但其默认样式在许多浏览器中并不统一，有时显得较为简陋。为了提升用户体验和界面美观度，开发者经常...
通过模拟Select，我们可以自由控制下拉列表的显示、隐藏，甚至可以实现动态加载和异步更新。 首先，`index.html`文件是整个项目的入口，它包含了HTML结构。在HTML中，我们通常会创建一个无实际选项的Select元素，...
在网页设计中，`<select>`元素通常用于创建下拉列表，用户可以在其中选择一个或多个选项。然而，标准的`<select>`元素通常只支持文本内容，不直接支持显示图片。但随着网页交互性的增强，设计师们有时需要在下拉列表...