JS多项选择脚本

最新推荐文章于 2022-11-21 09:25:03 发布
最新推荐文章于 2022-11-21 09:25:03 发布
阅读量568 收藏
点赞数
分类专栏： js文章 文章标签： insert function button input javascript border
  1. <html>  
  2. <script language="javascript">  
  3.      function insertall(){   
  4.              var oDest=document.all.lstSelected;   
  5.              for (var i=0;i<document.all.personList.options.length;i++)   
  6.              {   
  7.                  var e=document.all.personList.options[i];   
  8.                  insert(oDest,e.innerText,e.value);   
  9.              }   
  10.             oDest=document.all.personList;   
  11.              removeAll(oDest);   
  12.     }   
  13.   
  14.    function removeAll(oSelect){   
  15.              for( i=oSelect.childNodes.length -1;i>=0;i--){   
  16.                  var node = oSelect.childNodes(i);   
  17.                  oSelect.removeChild(node);   
  18.                }   
  19.          }   
  20.            
  21. function insert2(){   
  22.              var oDest=document.all.lstSelected;   
  23.              for (var i=0;i<document.all.personList.options.length;i++)   
  24.              {   
  25.                  var e=document.all.personList.options[i];   
  26.                  if (e.selected){   
  27.                      insert(oDest,e.innerText,e.value);   
  28.                  }   
  29.             }   
  30.            oDest=document.all.personList;   
  31.             removeSelected(oDest);   
  32.          }   
  33.            
  34.      function yichu2(){   
  35.              var oDest=document.all.personList;   
  36.              for (var i=0;i<document.all.lstSelected.options.length;i++)   
  37.              {   
  38.                  var e=document.all.lstSelected.options[i];   
  39.                  if (e.selected){   
  40.                      insert(oDest,e.innerText,e.value);   
  41.                  }            
  42.             }   
  43.             oDest=document.all.lstSelected;   
  44.              removeSelected(oDest);   
  45.          }   
  46.            
  47.      function quanyi2(){   
  48.              var oDest=document.all.personList;   
  49.              for (var i=0;i<document.all.lstSelected.options.length;i++)   
  50.              {   
  51.                  var e=document.all.lstSelected.options[i];   
  52.                  insert(oDest,e.innerText,e.value);   
  53.            
  54.              }   
  55.             oDest=document.all.lstSelected;   
  56.              removeAll(oDest);   
  57.          }   
  58.        
  59.      function insert(oDest,name, value){   
  60.                  var oNewNode = document.createElement("option");   
  61.                 oNewNode.innerText=name;   
  62.                 oNewNode.value = value;   
  63.                  addUniqueNode(oNewNode, oDest)   
  64.          }   
  65.        
  66.      function   addUniqueNode(node, oDest){   
  67.         var oNewNode = document.createElement("option");   
  68.         var nodeExist = false;   
  69.         for(y in oDest.children){   
  70.             if(node.value == oDest.children[y].value){   
  71.               nodeExist = true;   
  72.                break;   
  73.             }   
  74.         }   
  75.   
  76.         if(!nodeExist){   
  77.            var newNode = node.cloneNode(true);   
  78.            oDest.appendChild(newNode);   
  79.         }       
  80.      }   
  81.   
  82.      function removeSelected(oSelect){   
  83.          for( i=oSelect.childNodes.length -1;i>=0;i--){   
  84.              var node = oSelect.childNodes(i);   
  85.              if(node.selected){   
  86.                oSelect.removeChild(node);   
  87.              }   
  88.          }   
  89.      }   
  90. </script>  
  91. <body>  
  92. <table border="0">  
  93.               <tr>  
  94.                 <td>  
  95.                   <select name="personList" size="4" MULTIPLE style="width: 200px;height:100px">  
  96.                     <option value="1">中国广州</option>  
  97.                     <option value="2">中国上海</option>  
  98.                     <option value="3">中国北京</option>  
  99.                     <option value="4">中国武汉</option>            
  100.                   </select>  
  101.                 </td>  
  102.                <td width=50>  
  103.                <input name="add" type="button" onClick="insert2();" value="添 加">  
  104.                <input name="yichu" type="button" onClick="yichu2();" value="移 除">  
  105.                <input name="quanyi" type="button" onClick="quanyi2();"  value="全 移" >  
  106.                <input name="addall" type="button" onClick="insertall();" value="全 加">  
  107.                </td>  
  108.                  <td>  
  109.                   <select name="lstSelected" size="4" MULTIPLE style="width:200px;height:100px">  
  110.                   </select>  
  111.                 </td>  
  112.               </tr>   
  113.    </table>  
  114. </body>  
  115. </html>  
 
lxy_abcde1190
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS多选下拉框_实现多项选择
11-19
JS多选下拉框，实现多选。点击显示下拉。
js实现多选、全选、反选、取消选择（篇一）
纸飞机博客
12-04 7763
就算全世界离开你，还有一个我来陪，我会永远站在你身边。 对于上次的多选和取消选择，我来把它给补充完整，包含全选和反选。 多选和取消选择 效果图如下： 代码如下： <template> <div class="app"> <div class="ul"> <div class="li" @click="checkFn(item)" :class="isActiveFn(item)?'active':''" v-for="(item.
JS多项目选择脚本
fengpeng120的专栏
06-25 174
代码 &lt;html&gt;   &lt;script language="javascript"&gt;       function insertall(){                var oDest=document.all.lstSelected;                for (var i=0;i&lt;document....
js 实现 用JavaScript生成多项选择
03-31
js 实现 用JavaScript生成多项选择! 值得下载看看!资源免费,大家分享!!
JS实现下拉框多项选择
03-03
下拉选框没有实现多选功能，所以用JS来这现它。使用还比较方便
多项选择列表弹出窗口.zip
04-27
在多项选择列表弹出窗口中，JavaScript主要负责处理用户与界面的交互，如响应按钮点击事件、显示/隐藏弹出窗口、管理列表项的选中状态等。我们可以使用`addEventListener`方法监听按钮点击事件，然后使用`style....
深入理解选择框脚本[推荐]
11-26
本文将深入探讨选择框的JavaScript操作，重点关注`<select>`元素及其相关的属性和方法。 1. **multiple属性**： `multiple`属性用于指定一个选择框是否支持多选。默认情况下，`<select>`元素是单选的，即用户只能...
Java如何防止JS脚本注入代码实例
10-14
在Web应用中，防止跨站脚本（Cross-Site Scripting, XSS）注入是一项重要的安全措施。XSS攻击可以允许攻击者在用户的浏览器中执行恶意脚本，从而窃取用户信息、进行钓鱼攻击或进行其他恶意操作。在Java开发中，可以...
可以关闭计算机的js脚本
10-31
尽管存在一定的限制，使用 JavaScript 脚本关闭计算机仍然有很多实际应用场景。例如，在自动化测试中，我们可以使用 JavaScript 脚本关闭计算机，以便模拟用户的行为。在某些情况下，我们也可以使用 JavaScript 脚本...
js手机三级联动菜单多项选择代码
10-27
在JavaScript编程领域，"js手机三级联动菜单多项选择代码"是一个常见的需求，特别是在移动应用或者响应式网站设计中。这种菜单通常用于实现复杂的选择逻辑，比如在电子商务网站中选择商品分类、属性等。下面我们将...
js实现多选、全选、反选、取消选择
小李在努力学习
11-21 1450
js实现多选、全选、反选、取消选择
JS:多选择(Select)脚本,add options
jxufewbt的专栏
04-06 1648
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改{fromList = eval(document.forms[0]. + from);toList = eval(document.forms[0]. + to);if (toList.option
JS实现单选、多选、全选、反选
gs981600308的博客
02-18 3247
HTML &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;全选反选问题&lt;/title&gt;
ABCD多选正则表达式
weixin_30443747的博客
03-21 441
正则表达式： 4个选项，可单选可多选不允许重复 ABCD正则： regexp:/^(?!.*((A.*){2,}|(B.*){2,}|(C.*){2,}|(D.*){2,})$)[A-D]{1,4}$/, ABCDabcd正则大小写都允许 regexp:/^(?!.*((a|A.*){2,}|(b|B.*){2,}|(c|C.*){2,}|(d|D.*){2,})$)[a-dA...
js的多项选择
11-23 36
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
javascript实现多选
WQ的技术分享
11-21 1111
html代码 js代码 var app = new Vue({ el : “.box”, data : { cities : [“上海”,“北京”,“广州”,“重庆”,“西安”], arr : [] }, methods :{ checkedBox(i){ if(this.arr.includes(i)){ //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效 //filter()方法用于把Array的某些元素过滤掉，filter()把传入的函数依次
前端怎么实现多项选择框
最新发布
04-19
前端可以使用HTML中的标签实现多项选择框，例如： 选项1 选项2 选项3 使用multiple属性可以使标签变成多项选择框。在后台处理时，可以通过表单提交或JavaScript脚本获取用户所选择的项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值