select多选框

效果：

代码：

 <HTML>

 <HEAD>

 <TITLE>选择下拉菜单</TITLE>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

 <META NAME="Description" CONTENT="Power by hill">

 </HEAD>

 <BODY>

 <p>选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。</p>

 <form method="post" name="myform">

 <table border="0" width="400">

 <tr>

 <td width="40%">

 <select style="height:200px;WIDTH:300px" multiple name="list1" size="10" ondblclick="moveOption(document.myform.list1, document.myform.list2)">

 <!--用forEach遍历出所有的option-->

 <option value="北京">北京</option>

 <option value="上海">上海</option>

 <option value="山东">山东</option>

 <option value="安徽">安徽</option>

 <option value="重庆">重庆</option>

 <option value="福建">福建</option>

 <option value="甘肃">甘肃</option>

 <option value="广东">广东</option>

 <option value="广西">广西</option>

 <option value="贵州">贵州</option>

 <option value="海南">海南</option>

 <option value="河北">河北</option>

 <option value="黑龙江">黑龙江</option>

 </select>

 </td>

 <td width="20%" align="center">

 <input type="button" value="全部添加" onclick="moveAllOption(document.myform.list1, document.myform.list2)"><br/>

 <br/>

 <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br/>

 <br/>

 <input type="button" value="移除" onclick="moveOption(document.myform.list2, document.myform.list1)"><br/>

 <br/>

 <input type="button" value="全部移除" onclick="moveAllOption(document.myform.list2, document.myform.list1)">

 </td>

 <td width="40%">

 <select style="height:200px;WIDTH:300px" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">

 </select>

 </td> 

 </tr>

 </table>

 值：<input type="text" name="city" size="40">

 </form>

 <script language="JavaScript">

 <!--操作全部-->

 function moveAllOption(e1, e2){

 var fromObjOptions=e1.options;

  for(var i=0;i<fromObjOptions.length;i++){

   fromObjOptions[0].selected=true;

   e2.appendChild(fromObjOptions[i]);

   i--;

  }

 document.myform.city.value=getvalue(document.myform.list2);

 }

 <!--操作单个-->

 function moveOption(e1, e2){

 var fromObjOptions=e1.options;

  for(var i=0;i<fromObjOptions.length;i++){

   if(fromObjOptions[i].selected){

    e2.appendChild(fromObjOptions[i]);

    i--;

   }

  }

 document.myform.city.value=getvalue(document.myform.list2);

 }

 function getvalue(geto){

 var allvalue = "";

 for(var i=0;i<geto.options.length;i++){

 allvalue +=geto.options[i].value + ",";

 }

 return allvalue;

 }

 function changepos1111(obj,index)

 {

 if(index==-1){

 if (obj.selectedIndex>0){

 obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))

 }

 }

 else if(index==1){

 if (obj.selectedIndex<obj.options.length-1){

 obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))

 }

 }

 } 

 </script>

 </BODY>

 </HTML>

转载：https://zhidao.baidu.com/question/919455366209771779.html?from=commentSubmit#answers1937849002

select多选框的更多相关文章

  1. jquery获取select多选框选中的值

    select下拉框选中的值,用jquery大家应该都会获取, $("#selectBox option:selected").val(); 如果select是多选的,也这么获取的话 ...

  2. jquery获取select多选框选中的文本值

    $("#select option:selected").text();

  3. 改变 小程序 select 多选框 选中图片

    https://www.jianshu.com/p/11eb5b0bfe1a 注意 博客介绍的  在 wxss  backgroung-image 中引入小程序内图片是不可的,传到cdn上才实现

  4. 如何在select下拉列表中添加复选框?

    近来在给一个公司做考试系统的项目,遇到的问题不少,但其中的几个让我对表单的使用颇为感兴趣,前端程序员都知道,下拉列表有select标签,复选框有checkbox,但是两者合在一起却少有人去研究,当时接 ...

  5. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  6. 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  7. JQuery实现的 checkbox 全选；<select>下拉框功能

    1. 全选的checkbox选中时,子checkbox全部选中.反之,全部不选 2.子checkbox中,只要有没有被选中的,取消全选checkbox的选中 3.子checkbox的数量和子check ...

  8. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  9. 下拉选择select和复选框checkbox的状态的各种方式

    复选框的状态 <input name="ck" value=" " type="checkbox"  checked> 或者&l ...

随机推荐

  1. 【第二周】【作业五】Scrum 每日站会

    1.首先来看一下什么是Scrum: Scrum是一种敏捷软件开发的方法学,用于迭代式增量软件开发过程.Scrum在英语是橄榄球运动中争球的意思. 虽然Scrum是为管理软件开发项目而开发的,它同样可以 ...

  2. maven 实践 ：管理依赖

    有人认为Maven是一个依赖管理工具,当然这种想法是错误的(确切的说Maven是一个项目管理工具,贯穿了整个项目生命周期,编译,测试,打包,发布...),但Maven给人造成这种错误的印象也是有原因的 ...

  3. Windows连接Linux服务器中MySQL数据库-权限配置

    问题描述 在Windows系统中安装了监控MySQL数据库服务器性能的工具Spotlight on MySQL,利用Spotlight连接Linux服务器中的MySQL,进行相关配置如下:   点击& ...

  4. LoadRunner脚本增强技巧之手动关联

    个人认为LoadRunner的手动关联技巧可以看做参数化的一种,区别在与获取参数的来源不同. 一般的参数化:把脚本中一个写死的数值或者字符串用一个变量参数来代替,每次迭代的时候,从本地文件或者数据库中 ...

  5. 题解 P2955 【[USACO09OCT]奇数偶数Even? Odd? 】

    很明显这题是个假入门! 小金羊一不小心点进题解发现了内幕 能看的出来都WA过Unsigned long long int 做题可以用Python,Python的变量虽然 强悍的不行! 但是我们可以用字 ...

  6. hive 排序和聚集

    1.order by 是对数据进行全排序,属于标准排序语句 order by 会对输入做全局排序,因此只有一个reducer(多个reducer无法保证全局有序)只有一个reducer,会导致当输入规 ...

  7. [SHOI2011]双倍回文 manacher

    题面: 洛谷:[SHOI2011]双倍回文‘ 题解: 首先有一个性质,本质不同的回文串最多O(n)个. 所以我们可以对于每个i,求出以这个i为结尾的最长回文串,然后以此作为长串,并判断把这个长串从中间 ...

  8. 【BZOJ3672】【NOI2014】购票（线段树，斜率优化，动态规划）

    [BZOJ3672][NOI2014]购票(线段树,斜率优化,动态规划) 题解 首先考虑\(dp\)的方程,设\(f[i]\)表示\(i\)的最优值 很明显的转移\(f[i]=min(f[j]+(de ...

  9. UTF-8和GBK编码之间的区别(页面编码、数据库编码区别)以及在实际项目中的应用

    第一节:UTF-8和GBK编码概述 UTF-8 (8-bit Unicode Transformation Format) 是一种针对Unicode的可变长度字符编码,又称万国码,它包含全世界所有国家 ...

  10. bzoj2089&2090: [Poi2010]Monotonicity

    双倍经验一眼题... f[i][1/2]表示以i结尾,当前符号应该是</>的最长上升子序列, 用BIT优化转移就好 =的话就不用说了吧= = #include<iostream> ...