两个Select 之间的值的传递

最新推荐文章于 2022-01-08 13:50:12 发布
最新推荐文章于 2022-01-08 13:50:12 发布
阅读量614 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： button generator javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ayueiloveyou/article/details/2760882
版权

 运行效果：

下面是代码:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.  <HEAD>
  4.   <TITLE> New Document </TITLE>
  5.   <META NAME="Generator" CONTENT="EditPlus">
  6.   <META NAME="Author" CONTENT="">
  7.   <META NAME="Keywords" CONTENT="">
  8.   <META NAME="Description" CONTENT="">
  9.   <SCRIPT LANGUAGE="JavaScript">
  10.   <!--
  11.     /**
  12.     *移动全部
  13.     */
  14.     function moveAll(moveto){
  15.         //取得两个对象
  16.         var sel0=document.getElementById("name1");
  17.         var sel2=document.getElementById("name2");
  18.         //如果要把右侧数据全移到左侧则调换两个对象
  19.         if(moveto=='left'){
  20.             sel0=document.getElementById("name2");
  21.             sel2=document.getElementById("name1");
  23.         }
  24.         var length=sel0.options.length;
  25.         for(var i=0;i<length;i++){
  26.             var tem=sel0.options[0];
  27.             sel2.appendChild(tem);
  28.         }
  29.     }
  31.     /**
  32.     *移动部分
  33.     *name1被移动的对象
  34.     *name2目标对象
  35.     */
  36.     function move(name1,name2){
  37.         var sel0=document.getElementById(name1);
  38.         var sel2=document.getElementById(name2);
  39.         var length=sel0.options.length;
  40.         for(var i=length-1;i>=0;i--){
  41.             var tem=sel0.options[i];
  42.             if(tem.selected){
  43.                 sel2.appendChild(tem);
  44.             }
  45.         }
  46.     }
  47.   //-->
  48.   </SCRIPT>
  49.  </HEAD>
  51.  <BODY>
  52.  <form name="form1">
  53.  <table><tr><td>
  54.   <select id="name1" name="name1" multiple="true" style="width:120" size="5">
  55.   <option value="1">1</option>
  56.    <option value="2">2</option>
  57.     <option value="3">3</option>
  58.    <option value="4">4</option>
  59.     <option value="5">5</option>
  60.      <option value="6">6</option>
  61.       <option value="7">7</option>
  62.        <option value="8">8</option>
  63.     </select>
  64.     </td>
  65.     <td>
  66.     <table><tr><td align="center">
  67.     <input type="button" value="全部<<" onclick="moveAll('left')"/>
  68.     </td>
  69.     </tr><tr>
  70.     <td align="center">
  71.     <input type="button" value="<<" onclick="move('name2','name1')"/>
  72.     </td>
  73.     </tr><tr>
  74.     <td align="center">
  75.     <input type="button" value=">>" onclick="move('name1','name2')"/>
  76.     </td>
  77.     </tr><tr>
  78.     <td align="center">
  79.     <input type="button" value="全部>>" onclick="moveAll('right')"/>
  80.     </td></tr>
  81.     </table>
  82.     </td>
  83.     <td>
  84.     <select name="name2" id="name2" multiple="true" style="width:120" size="5">
  85.     </select>
  86.     </td>
  87.     </tr>
  88.     </table
  89.     </form>
  90.  </BODY>
  91. </HTML>

 

可以按“shift”选择多个

我是小辉辉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview select选中值取值_iView的Select选择框
weixin_39922147的博客
12-20 3011
目录在此先列出解决了那些问题，以防读者看完了没有用处：1、示例，最基础的使用方法2、传参，传多个值的方式3、默认值4、清空重置无效5、可搜索的用法及如何限制搜索字符长度一、示例html:{{item.name}}js:data: {formSend: {name: '',code: ''},dataList: [{id: 1,name: '中国',code: 'china'}]},methods:...
js 两个select的值传递
百威
02-27 220
转载：http://hi.baidu.com/javajavajava/blog [code="java"] function getSelectedDepartmentValue(){ var temp=""; var obj2=document.addNotice.selectDepartment; var length=obj2.options.len...
antd Select同时传两个值
weixin_45582966的博客
10-09 1839
假设有一个数组userList <Select placeholder="请选择通知人员" mode="multiple" labelInValue > { userList.map(item => <Option key={item.userId} >{item.userName}</Option>) } </Select> 设置labelInValue，这样就可以同时得到userId和userName over
element-ui使用select组件传递多个值
wang_bing_bo的博客
04-16 2315
发现问题 首先我们来看一段最基本的el-select代码 <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in food" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select&g
elementui el-select change事件传递多个值
chris
08-21 7455
elementui el-select change事件传递多个值 <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="一级菜单"> <el-select v-model="menuSelect" filterable placeholder="请选择" style="margin:0 auto ;" size="m
【vue】element ui select选择一个选项传两个值
loyd3的博客
01-08 4175
一般 el-select通过v-model同步传值（一般是传id） 有时需要选择后同时保存id和name 这时可以通过**@change**方法来实现，代码如下： <el-select v-model="id" placeholder="请选择所属分类" class="form-input" @change="handleDirChange($event)" > <el-option :label="item.dirName" :value
select 同时传送两个值
水墨痕迹
03-28 4650
第一种写法：aaabbbccc第二种写法：
jquery 操作两个select实现值之间的互相传递
10-26
在本文中，我们将深入探讨如何利用 jQuery 来操作两个 `<select>` 元素，实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先，我们需要理解 `<select>` 元素在 HTML 中的作用。`...
javascript select 之间传值效果的代码
10-30
本文将详细介绍一个示例代码，该代码实现了两个`<select>`元素之间的值传递。当用户在第一个下拉列表中选择某个选项时，会根据所选选项动态更新第二个下拉列表中的内容。此功能常见于表单处理、数据过滤等场景。 ##...
jquery select 选中值设置左右select选择互换
10-31
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
两个select多选模式的选项相互移动(示例代码)
01-19
标题中的"两个select多选模式的选项相互移动(示例代码)"是指在HTML网页中，有两个`<select>`元素，它们都设置了`multiple`属性，允许用户选择多个选项。这个功能通常用于用户需要在两个列表之间转移选项的场景，比如...
Mybatis传递多个参数进行SQL查询的用法
09-02
当需要传递多个参数时，可以使用`Map, Object>`作为方法的参数。在Java代码中，可以创建一个Map实例并将所有参数放入其中，然后将Map对象传递给Mapper接口的方法。例如： ```java Map, Object> params = new ...
vue select传多个值，传多个值的方法
weixin_38373875的博客
07-05 7038
el-select遍历方法，在el-select中写上@change，如@change=“pickRoleName” <el-select @change="pickRoleName" v-model="ToviewForm.deptId" placeholder="请选择" ...
Html中文本滚动显示(上下滚动)
04-29 3167
 新的文本由下向上把旧的文本替换掉:主要是对CSS和DIV的应用。 只要我们想要更新数据时，就可以调用setTest（）方法，传递想要显示的字符串，而且如果当前信息正在滚动时，那么传递的字符串信息会缓充起来，当前信息显示完毕后再显示下一条html>head>title>title>style type="text/css"> .divs...{ overflow:hidden; b
为JS中的String对象添加trim()方法
05-10 904
象标题说的那样，JS中的String对象中没有trim()方法，就是去除前面的和后面的空格，用起来不方便，那么我就为String添加一个： JS test <!-- String.prototype.trim=function(){ return this.replace(/(^/s*)|(/s*$)/g, ); }
html中用shift实现区域选择
09-20 677
此例实现了shift多选,可把下面的文件运行看到结果HTML>HEAD>TITLE> New Document TITLE>META NAME="Generator" CONTENT="EditPlus">META NAME="Author" CONTENT="">META NAME="Keywords" CONTENT="">META NAME="Desc
mybatis中。一个select语录两个foreach条件
最新发布
03-25
在MyBatis中，可以使用两个foreach来传递多个条件到查询语句中。具体做法是在SQL中使用in语句并将两个foreach语句分别包含在in语句中。...这样就可以在一个select语句中同时传递两个条件，使得查询更加简洁和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值