`

javascript制作select列表双向选择

jQueryJavaScriptIEHTMLXHTML 
阅读更多

  做项目的时候要用到的一个小功能，用的纯JS，很实用，该功能很常见，其实就是从左边列表的选项进行选择，在右边的文本域里显示选择好的选项。代码如下：

Html代码 复制代码 收藏代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>QQ邮箱 - 编辑联系组</title>
<link rel="stylesheet" type="text/css" href="http://rescdn.qqmail.com/zh_CN/htmledition/style/comm201003a763.css" />
<link rel="stylesheet" type="text/css" href="/cgi-bin/getcss?sid=_3QWaXoa53T1QHg1&ft=skin" />
<style type="text/css">
select {font-family:Arial;}
</style>
<script language="JavaScript" src="http://rescdn.qqmail.com/zh_CN/htmledition/js/all044efa.js"></script>
<script language="javascript">
function MoveAll(FromList,ToList)
{
 for(var i=0;i<FromList.length;i++)
 {
   ToList[ToList.length]=new Option(FromList.options[i].text,FromList.options[i].value);
 }
 FromList.length=0;
};
function MoveSelection(FromList,ToList)
{
 for(var i=0;i<FromList.length;i++)
 {
  if(FromList.options[i].selected)
  {
   ToList[ToList.length]=new Option(FromList.options[i].text,FromList.options[i].value);
  }
 }
 for(i=FromList.length-1;i>=0;i--)
 {
  if(FromList.options[i].selected)FromList.remove(i);
 }
};
function fSelectAllAddress(frm)
{
 for(i=0;i<frm.InGroup.length;i++)
 {
  frm.InGroup.options[i].selected=true;
 }
};
</script>
</head>
<body class="tbody" onload="document.frm.GrpName.focus()">
<form name="frm" id="frm" action="/cgi-bin/addr_grp_addedit_html?sid=_3QWaXoa53T1QHg1" target="actionFrame" method="post" onsubmit="fSelectAllAddress(this)">
<input type="hidden" name="sid" value="_3QWaXoa53T1QHg1" >
<input TYPE="hidden" name="isqqgroup" value="">
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="toolbg">
 <input type="hidden" name="t">
 <tr>
  <td align="left" nowrap class="barspace toolbgline f_family">
   <input type="submit" value=" 保存信息 " class="wd2 btn btn_true" /><input type="button" value=" 取消 " class="wd1 btn btn_true" onclick="javascript:location.href='/cgi-bin/addr_listall?sid=_3QWaXoa53T1QHg1'" />
  </td>
 </tr>
</table>
<input TYPE="hidden" name="OperType" value="ADD">
<input TYPE="hidden" name="GrpID" value="0">
<div class="settingtable">
<center>
<div style="width:96%;text-align:left;font:bold 14px Verdana;padding:15px 0 4px 2px" class="addr_line">
 新建联系组&nbsp;
</div>
</center>
<table width="96%" border="0" cellspacing="0" cellpadding="3" align="center">
 <tr>
  <td colspan="3" align="left" style="padding:12px 18px 20px 8px;height:40px;">组名：<input type="text" autocomplete="off" class="txt" name="GrpName" size="36" value=""  />&nbsp;&nbsp;<font color="#FF0000">*必填</font></td>
 </tr>
 <tr>
  <td align="left" width="270" style="padding:2px 5px 2px 8px;line-height:20px;">
   可选联系人<br>
   <select name="OutGroup" size="15" style="width:250px;height:250px" multiple ondblclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)">
         <option value="14">BOSS &lt;</option>
      <option value="6">李宁岩 &lt;464199706@qq.com&gt;</option>
      <option value="62">◇親伱メ尐嘴 &lt;453793743@qq.com&gt;</option>
      <option value="10">日落烟痕 &lt;547225369@qq.com&gt;</option>
      <option value="18">天上人间 &lt;756525813@qq.com&gt;</option>
      <option value="80">为爱守候 &lt;303620146@qq.com&gt;</option>
      <option value="109">无悔 &lt;hq617831081@qq.com&gt;</option>
      <option value="105">我也非猪油 &lt;348186038@qq.com&gt;</option>
      <option value="27">我自己的邮箱 &lt;949162895@qq.com&gt;</option>
      <option value="7">徐平 &lt;501927433@qq.com&gt;</option>
      <option value="16">谢庆福 &lt;736972118@qq.com&gt;</option>
      <option value="13">谢祯仪 &lt;649515878@qq.com&gt;</option>
      <option value="20">余鸿 &lt;821493905@qq.com&gt;</option>
      <option value="11">曾建欣 &lt;593951090@qq.com&gt;</option>
      <option value="423">张鹏 &lt;912315738@qq.com&gt;</option>
      <option value="12">钟秋霞 &lt;596251288@qq.com&gt;</option>
      <option value="213">136216843 &lt;136216843@qq.com&gt;</option>
      <option value="309">2个人 &lt;511032797@qq.com&gt;</option>
      <option value="233">472243722 &lt;472243722@qq.com&gt;</option>
      <option value="108">617831081 &lt;617831081@qq.com&gt;</option>
      <option value="107">731768642 &lt;731768642@qq.com&gt;</option>
      <option value="234">963925022 &lt;963925022@qq.com&gt;</option>
         </select>  
  </td>
  <td align="left" width="60">
   <input type="button" class="wd2 btn btn_true" onclick="MoveSelection(document.frm.OutGroup,document.frm.InGroup)" value=" 添加 &#8250; " /><br /><br />
   <input type="button" class="wd2 btn btn_true" onClick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)" value=" &#8249; 删除 " /><br /><br />
   <input type="button" class="wd2 btn btn_true" onclick="MoveAll(document.frm.OutGroup,document.frm.InGroup)"  value="全添加 &#187;" /><br /><br />
   <input type="button" class="wd2 btn btn_true" onclick="MoveAll(document.frm.InGroup,document.frm.OutGroup)" value="&#171; 全删除" /><br />
  </td>
  <td align="left" style="padding:2px 10px 2px 20px;line-height:20px;">
   已有联系人<br>
   <select name="InGroup" size="15" style="width:250px;height:250px" multiple ondblclick="MoveSelection(document.frm.InGroup,document.frm.OutGroup)">
            </select>
  </td>
 </tr>
 <tr><td colspan="3" align="left" height="35" valign="top" class="addrtitle" style="padding-left:8px;">按住Ctrl键可以多选,shift键可选择范围，双击可以直接添加</td></tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" class="toolbg">
 <input type="hidden" name="AddrID" value="">
 <input type="hidden" name="t">
 <tr>
  <td align="left" nowrap class="barspace toolbgline f_family">
   <input type="submit" value=" 保存信息 " class="wd2 btn btn_true" /><input type="button" value=" 取消 " class="wd1 btn btn_true" onclick="javascript:location.href='/cgi-bin/addr_listall?sid=_3QWaXoa53T1QHg1'" />
  </td>
 </tr>
</table>
</form>
<script language="javascript">
 PGV();
</script>
</body>
</html>
 
分享到：
| jquery 操作单选框，复选框，下拉列表
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery制作select列表双向选择示例代码

    在本示例中，我们将探讨如何使用jQuery库来实现一个select列表的双向选择功能。该功能允许用户通过简单的点击按钮来控制选项在两个列表之间的转移。 首先，我们来简单介绍一下select列表。Select列表是一种HTML元素...

    jquery 列表双向选择器之改进版

    改进后的双向选择器将元素改成了select option，这样的改进让双向选择器支持了shift多选，大大提高了用户体验。 知识点2：shift多选 shift多选是一种通过按住shift键来选择多个连续选项的操作方式。在改进后的双向...

    jQuery下拉列表框双向选择

    在IT行业中，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理以及动画制作。在网页开发中，下拉列表框（Dropdown List）是常见的用户交互元素，用于提供多个选项供用户选择。而“jQuery下拉...

    jQuery实现双向选择列表框

    本文将深入探讨如何使用jQuery实现双向选择列表框，这在需要同步两个下拉列表的选择时非常有用，例如在一对一映射或多选选项同步的情景。 首先，双向选择列表框的基本概念是，当在一个列表中做出选择时，相应的选项...

    jquery select 选中值设置左右select选择互换

    在IT领域，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要...

    jQuery 多选下拉框

    在网页设计和开发中，jQuery 是一款非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作等任务。"jQuery 多选下拉框"是一个基于jQuery实现的组件，它提供了一种用户友好的方式来处理多选功能，尤其...

    30组常用前端开发组件库,前端组件收集整理列表.pdf

    表单处理方面，`Validator`、`Parsley`、`jquery.form.js`、`Validform`、`validator.js`和`Fort.js`提供了表单验证功能，而`Chosen`、`Select2`和`bootstrap-select`则优化了下拉选择框。`iCheck`增强了复选框和...

    自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    而jQuery则是一套广泛使用的JavaScript库，主要用于简化DOM操作、事件处理、动画制作和Ajax交互等。当我们需要在Angular项目中实现与Bootstrap风格相一致的自定义指令，并且希望这些指令能够与jQuery集成时，就能够...

    vue-简易计算机.docx

    - `&lt;select v-model="type"&gt;` 下拉菜单用来选择运算类型。 - `()"&gt;=` 按钮触发计算操作。 - `&lt;span&gt;{{result}}&lt;/span&gt;` 展示计算结果。 - **JavaScript逻辑** - `const vm = new Vue({` 创建Vue实例并定义其...

    jquery-978-1-7832-8665-2：掌握jQuery UI

    jQuery 是一个 JavaScript 库，它简化了 DOM 操作、事件处理和动画制作。jQuery UI 建立在 jQuery 之上，进一步扩展了其功能。 1. **DOM 操作**：jQuery 提供了一套简洁的 API 来查找、操作和修改 HTML 文档对象...

    打印 发票 表格实现

    此外，为了提升用户体验，可以考虑使用第三方库，如`ngx-print`或`@ng-select/ng-select`等，它们提供了更高级的打印选项和控件，比如预览、选择打印机等。 在实际项目中，可能还需要处理更复杂的需求，如动态生成...

    如何用angularjs制作一个完整的表格

    在这个例子中，`items`数组包含了表格的所有行数据，`ng-model`指令用于双向数据绑定，将表格行的选择状态与`item.selected`属性关联。 此外，还可以在控制器中添加方法来处理用户交互，比如刷新数据(`refresh()`)...

    jsp实现的信息管理系统

    - **查询（Search/Display）**: 用户可以通过关键词或者ID进行搜索，JSP构造SELECT SQL，执行查询，获取结果集，再用JSP标签库（如JSTL）将数据渲染到页面上。 3. **Access数据库**： Access是一款轻量级的关系型...

    form表单设计 Internet寻址

    1. **表单元素**：`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;button&gt;`等元素用于创建不同的输入类型，如文本框、多行文本、下拉列表和按钮等。 2. **表单属性**：`action`定义了表单提交后数据的去向，可以是一个URL...

    IT技术文章示例

    BlazeDS是一个Adobe提供的实时数据和远程调用解决方案，它可以作为Flex和Java之间的桥梁，实现双向数据流和远程过程调用。利用BlazeDS，Flex客户端可以订阅Java服务器上的事件，实时获取更新数据，同时也可以调用...

    第一次接触神奇的前端框架vue.js

    简单来说，它能够将表单的输入（input）、选择（select）或者文本域（textarea）元素的值绑定到组件的数据模型上，反之亦然。在实际应用中，通常用它来创建动态表单。例如，在一个简单的注册表单中，我们可以用`v-...

    纯HTML标签你熟悉多少?

    57. `&lt;select&gt;`：创建下拉选择列表。 58. `&lt;small&gt;`：定义较小的文本。 59. `&lt;source&gt;`：在多媒体元素（如`&lt;audio&gt;`和`&lt;video&gt;`）中指定媒体源。 60. `&lt;span&gt;`：定义文档中的一个节，用于应用内联样式或脚本操作...

    教学实施大纲(javaWEB方向)

    - **实现省市级联**：通过JavaScript动态更新选项列表。 - **使用JavaScript访问样式的常用方法**：如getElementById()、getElementsByClassName()等。 **4. 表单验证** - **表单验证概述**：确保用户提交的数据...

Magicbox
Global site tag (gtag.js) - Google Analytics