一、Javascript 实现多选 select 的增加与移除效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Select下拉列表框进行多选、移除、交换内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body style="font-size:12px">
<form name="form1" method="post" action="">
<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/jscss/demoimg/200908/selectbg.jpg" bgcolor="#FFFFFF"> 请选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><select name="sel_place1" size="6" multiple id="sel_place1" style="width:100px " >
<option value="sel1">江苏省</option>
<option value="sel2">广东省</option>
<option value="sel3">河南省</option>
<option value="sel4">吉林省</option>
<option value="sel5">浙江省</option>
</select></td>
</tr>
</table></td>
<td width="80" align="center" valign="bottom"><input name="sure1" type="button" id="sure1"
onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);" value="<<">
<input name="sure2" type="button" id="sure2"
onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);" value=">>" align="center" height="2"></td>
<td width="150"><table width="150" border="0" cellpadding="1" cellspacing="1" bgcolor="#CAFAFC">
<tr>
<td height="25" background="/jscss/demoimg/200908/selectbg.jpg" bgcolor="#FFFFFF"> 已选择：</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><select name="sel_place2" size="6" multiple id="sel_place2" style="width:100px ">
</select></td>
</tr>
</table></td>
</tr>
</table>
</form>
<script language="javascript">
function allsel(n1,n2)
{
while(n1.selectedIndex!=-1)
{
var indx=n1.selectedIndex;
var t=n1.options[indx].text;
n2.options.add(new Option(t));
n1.remove(indx);
}
}
</script>
</body>
</html>
二、JQuery 实现多选 select 的增加与移除效果
<!-- Author==>> Henry -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>JQuery操作select</title>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script language="javascript">
// select 中的 onchange()事件
function selectChange() {
$("#add").attr("disabled",false); // 首先将添加按钮设为可用
var selectObject = $("#myselect").val(); // 取得左侧所选取的值
$("#myresult").find("option").each(function(){ // 以 option 为参数 查询 右侧所有的可选项并逐一遍历
if($(this).val() == selectObject){ // 判断左侧中选择的项在右侧中是否已经存在
$("#add").attr("disabled",true); // 如果上面的判断存在则将添加按钮设为不可用, 禁止重复添加
}
});
}
// 左侧增加到右侧
function toAdd() {
var selectObject = $("#myselect").val(); // 取得左侧所选取的值
if (null==selectObject) {
alert("请选择要添加的内容!");
return false;
}
var content = "<option value='"+selectObject+"'>"+selectObject+"</option>"; // 填充右侧的值
$("#myresult").append(content);
//$("#myselect option:selected").remove(); // 删除左侧所选的值
selectChange(); // 最后调用 selectChange()模拟onChange()事件, 主要是为了能够及时地将禁用的添加按钮重新激活(如果有必要)
}
// 右侧移除
function toRemove() {
var removeObject = $("#myresult option:selected").val(); // 取得右侧要移除的内容, 注意可多选
if (null==removeObject) {
alert("请选择要删除的名字!");
return false;
}
$("#myresult option:selected").remove();
selectChange(); // 与toAdd()中调用原理一致
}
</script>
</head>
<body>
<p style="color:#F60; size:auto">Author: Henry</p>
姓名:
<select style="width:100px" id="myselect" size="5" onchange="selectChange()">
<option value="Henry">Henry</option>
<option value="Aaron">Aaron</option>
<option value="Gang">Gang</option>
</select>
<input id="add" name="add" type="button" value="添加" onclick="toAdd()"/>
<select style="width:100px" size="5" multiple id="myresult">
</select>
<input id="del" name="del" type="button" value="移除" onclick="toRemove()"/>
</body>
分享到：
相关推荐
本资源"jquery下拉多选select插件.rar"提供了一个基于jQuery实现的多选下拉框插件，适用于J2EE开发环境，尤其适合那些希望在网页中创建美观且功能强大的下拉选择器的开发者。 首先，让我们深入了解一下jQuery的选择...
**jQuery select下拉框单选和多选插件** 在Web开发中，下拉框（select）是常用的一种用户交互元素，它用于提供多个选项供用户选择。然而，原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...
"select多选下拉框美化"这个主题就是关于如何使用JavaScript库jQuery（jq）和CSS技术来提升HTML原生select元素的视觉效果和交互体验。下面我们将深入探讨这个话题。 首先，原生的HTML select元素在不同浏览器上展示...
**jQuery bootstrap-select 下拉多选和搜索 插件详解** 在网页开发中，为了提高用户体验，经常需要使用到下拉列表。然而，传统的HTML `<select>` 标签往往功能有限，无法满足复杂的交互需求，如多选和搜索功能。...
通过HTML5的`<select>`标签和`multiple`属性，结合JavaScript、jQuery、CSS以及AJAX，我们可以创建功能丰富、交互性强且具有吸引力的多选下拉框。在开发过程中，不要忘记关注可访问性和最佳实践，以确保所有用户都能...
6. **数据绑定**：对于动态加载或大量的选项，jQuery可以与服务器进行异步通信（使用Ajax）来获取和更新<select>的内容，实现数据的实时同步。 在压缩包文件“132689881949981602”中，很可能包含了实现上述功能的...
在本文中，我们将深入探讨如何使用 jQuery 来实现 Select 元素中的选项上移、下移、左移和右移功能。这对于需要动态调整选择项顺序的交互式应用非常有用，比如在线表单编辑或者配置工具。让我们逐一解析这个主题。 ...
然而，通过结合使用jQuery库，我们可以实现具有复选框功能的多选下拉框，这为用户提供更直观的选择体验。 ### jQuery简介 jQuery是一个轻量级、高性能的JavaScript库，简化了DOM操作、事件处理、动画效果以及Ajax...
本文将深入探讨如何使用jQuery实现一个功能丰富的下拉多选组件，包括左右选择和移除功能。 首先，`jQuery multiselect` 是一种常见的实现下拉多选的解决方案。它允许用户在下拉框中选择多个选项，同时提供了自定义...
这个例子不仅演示了如何使用jQuery来操作DOM元素，还展示了如何通过事件监听来实现动态的交互效果。这类功能在现代Web应用程序中非常常见，使用jQuery可以相对容易地实现复杂的用户界面交互。 总结来说，基于jQuery...
`jquery.editable-select` 提供了一个可编辑的文本输入框，与下拉选项列表相结合，使得用户可以即时搜索匹配项，无需滚动长长的列表。 3. **自定义输入**：用户在输入框中输入字符时，插件会实时过滤下拉列表，显示...
在HTML中，创建一个可多选的下拉框通常涉及到`<select>`元素与`<option>`元素的组合，但为了实现多选功能，我们需要使用`<input type="checkbox">`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...
总结来说，这个压缩包提供了一个实践性的学习平台，让你深入理解jQuery在实现下拉多选插件时的具体应用。通过解压并运行此项目，你可以看到实际效果，同时也可以修改代码进行进一步的定制和学习。无论是对初学者还是...
这是一个非常有用的jQuery方法，可以移除集合中所有匹配元素的子节点，从而确保在添加新的option之前select列表是空的。 以上就是这篇关于"jquery动态遍历select赋值的实例"中涉及的主要知识点。通过本文的介绍和...
《jQuery实现城市选择下拉框单选多选特效源码》 在网页开发中，用户交互体验至关重要，尤其是在数据输入时。城市选择下拉框是一个常见的功能，它可以帮助用户快速、准确地选择所需的城市信息。jQuery，作为一款广泛...
2. **初始化组件**：通过JavaScript代码选择需要转换为多选下拉框的`<select>`元素，并调用相应的jQuery插件方法进行初始化。 3. **设置配置**：可以设置一些参数，如默认选中项、是否允许全选、是否显示清除按钮等...
同时，插件也支持多种事件，如`onOpen`、`onClose`、`onSearch`、`onChange`等，这些事件可以与jQuery的事件处理函数结合使用，实现自定义功能。 四、兼容性与性能优化 考虑到实际项目中可能面临的浏览器兼容性...
jQuery作为一种流行的JavaScript库，极大地简化了DOM操作的过程，使得处理`<select>`元素变得简单高效。本文档汇总了一系列关于如何使用jQuery来操作`<select>`元素及其`<option>`子元素的方法，旨在为前端开发者...
《jQuery多功能Select控件——实现高效交互与美观界面》 在网页开发中，Select控件是常见的用户交互元素，用于提供下拉选项供用户选择。然而，原生的HTML Select控件在功能和视觉效果上往往无法满足现代网页设计的...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果以及Ajax交互等任务。"下拉多选菜单"是用户界面中常见的交互元素，常用于让用户从多个选项中选择一个或多个项目。在 ...