DOM操作多选下拉列表

最新推荐文章于 2022-01-09 20:33:28 发布
置顶 最新推荐文章于 2022-01-09 20:33:28 发布
阅读量740 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxuestarrysky/article/details/9220071
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
BODY
{
 font-family:"Courier";
 font-size: 12px;
 margin:0px 0px 0px 0px;
 overflow-x:no;
 overflow-y:no;
 background-color: #B8D3F4;
}
td
{
 font-size:12px;
}
.default_input
{
 border:1px solid #666666;
 height:18px;
 font-size:12px;
}
.default_input2
{
 border:1px solid #666666;
 height:18px;
 font-size:12px;
}
.nowrite_input
{
 border:1px solid #849EB5;
 height:18px;
 font-size:12px;
 background-color:#EBEAE7;
 color: #9E9A9E;
}
.default_list
{
 font-size:12px;
  border:1px solid #849EB5;
}
.default_textarea
{
 font-size:12px;
 border:1px solid #849EB5;
}

.nowrite_textarea
{
 border:1px solid #849EB5;
 font-size:12px;
 background-color:#EBEAE7;
 color: #9E9A9E;
}

.wordtd5 {
 font-size: 12px;
 text-align: center;
 vertical-align:top;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 background-color: #b8c4f4;
}

.wordtd {
 font-size: 12px;
 text-align: left;
 vertical-align:top;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 background-color: #b8c4f4;
}
.wordtd_1 {
 font-size: 12px;
 vertical-align:top;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 background-color: #516CD6;
 color:#fff;
}
.wordtd_2{
 font-size: 12px;
 text-align: right;
 vertical-align:top;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 background-color: #64BDF9;
}
.wordtd_3{
 font-size: 12px;
 text-align: right;
 vertical-align:top;
 padding-top: 6px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 background-color: #F1DD34;
}
.inputtd
{
 font-size:12px;
 vertical-align:top;
 padding-top: 3px;
 padding-right: 3px;
 padding-bottom: 3px;
 padding-left: 3px;
}
.inputtd2
{
 text-align: center;
 font-size:12px;
 vertical-align:top;
 padding-top: 3px;
 padding-right: 3px;
 padding-bottom: 3px;
 padding-left: 3px;
}
.tablebg
{
 font-size:12px;
}

.tb{
 border-collapse: collapse;
 border: 1px outset #999999;
 background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
       border-right-width:0px;
    border-left-width:0px;
    border-top-width:0px;
    border-bottom-width:1px;}

.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}

 


.noborder {
 border: none;
}

.button {
 border: 1px ridge #ffffff;
 line-height:18px;
 height: 20px;
 width: 45px;
 padding-top: 0px;
 background:#CBDAF7;
 color:#000000;
 font-size: 9pt;
    font-family:"Courier";
}

.textarea {
 font-family: Arial, Helvetica, sans-serif, "??";
 font-size: 9pt;
 color: #000000;
 border-bottom-width: 1px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: solid;
 border-left-style: none;
 border-bottom-color: #000000;
 background-color:transparent;
 text-align: left
}
-->
</style></head>

<body>

<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
  <tr>
    <td width="126">
     <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
  <select name="first" multiple="multiple" size=10 class="td3" id="s">
    <option value="选项1">选项1</option>
    <option value="选项2">选项2</option>
    <option value="选项3">选项3</option>
    <option value="选项4">选项4</option>
    <option value="选项5">选项5</option>
    <option value="选项6">选项6</option>
    <option value="选项7">选项7</option>
    <option value="选项8">选项8</option>
  </select>   
 </td>
    <td width="69" valign="middle">
       <input name="add"  id="add" type="button" class="button" value="-->" />
       <input name="add_all" id="add_all"  type="button" class="button" value="==>" />
       <input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
    <input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
        </td>
    <td width="127" align="left">
   <select name="second" size="10" multiple="multiple" class="td3" id="second">
         <option value="选项9">选项9</option>
      </select>
 </td>
  </tr>
</table>
</div>
</body>
<script type="text/javascript">
  window.οnlοad=function(){
/*************************************************************************************************************/   
  //选中的从左端移到右端
  //<input name="add"  id="add" type="button" class="button" value="-->" />
  document.getElementById("add").οnclick=function(){
      //获取<select name="first" multiple="multiple" size=10 class="td3" id="first">
   var firstElement=document.getElementById("first");
  
   //获取option
   var optionElements=firstElement.getElementsByTagName("option");
   var len=optionElements.length;
   //alert(len)
  
  //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
   var secondElement=document.getElementById("second");
  
  //遍历option
   for(var i=0;i<len;i++){
   var optionElement=optionElements[i];
   /*
    * firstElement.selectedIndex:
    *   * 表示当前选中的option的索引值,从0开始
    *   * 如果没有被选中的，selectedIndex=-1
    *   * 如果有多个被选中,selectedIndex的值永远是第一个被选中的值
    *   * javaScript的数组是动态的数组,数组的长度是可变的,索引值也在变
    */
   
   if (firstElement.selectedIndex != -1) {
      alert(firstElement.selectedIndex);
      secondElement.appendChild(optionElements[firstElement.selectedIndex]);
   }    
   }
  } 
/*************************************************************************************************************/ 
  //全部从左端移到右端
  //<input name="add_all" id="add_all"  type="button" class="button" value="==>" />
  document.getElementById("add_all").οnclick=function(){
     var firstElement=document.getElementById("first");
  
   //获取option
   var optionElements=firstElement.getElementsByTagName("option");
   var len=optionElements.length;
   //alert(len)
  
  //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second">
   var secondElement=document.getElementById("second");
      for (var i = 0; i < len; i++) {
         secondElement.appendChild(optionElements[0]);
      }
   }

   //简化的
//   document.getElementById("add_all").οnclick=function(){
//     var firstElement=document.getElementById("first");
//  var len=firstElement.length;
//  //alert(len)
//  var secondElement=document.getElementById("second");
//     for (var i = 0; i < len; i++) {
//         secondElement.appendChild(firstElement[0]);
//     }
//   }
/*************************************************************************************************************/
  //双击的从左端移到右端
//   document.getElementById("first").οndblclick=function(){
//      var firstElement=document.getElementById("first");
//      var optionElements=firstElement.getElementsByTagName("option");
// 
//      var secondElement=document.getElementById("second");
//      for(var i=0;i<optionElements.length;i++){
//   secondElement.appendChild(optionElements[firstElement.selectedIndex]);
//   } 
//   }
  
   //优化的
   document.getElementById("first").οndblclick=function(){
      var secondElement=document.getElementById("second");
   secondElement.appendChild(this[this.selectedIndex]);
   }
/*************************************************************************************************************/    
  //选中的从右端移到左端
  //<input name="remove"  id="remove" type="button" class="button" value="&lt;--" />
  document.getElementById("remove").οnclick=function(){
     var secondElement=document.getElementById("second");
   var optionElements=secondElement.getElementsByTagName("option");
   var len=optionElements.length;
 
   var firstElement=document.getElementById("first");
  
   for(var i=0;i<len;i++){
    if(secondElement.selectedIndex!=-1){
   firstElement.appendChild(optionElements[secondElement.selectedIndex]);
  }
   }
  }
/*************************************************************************************************************/ 
 //全部的从右端移到左端
 //<input name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" />
  document.getElementById("remove_all").οnclick=function(){
     var secondElement=document.getElementById("second");
   var optionElements=secondElement.getElementsByTagName("option");
   var len=optionElements.length;
   var firstElement=document.getElementById("first");
   for(var i=0;i<len;i++){
   firstElement.appendChild(optionElements[0]);
   }
  }
/*************************************************************************************************************/ 
 //双击的从右端移到左端
  document.getElementById("second").οndblclick=function(){
     var firstElement=document.getElementById("first");
   firstElement.appendChild(this[this.selectedIndex]);
  }
/*************************************************************************************************************/ 
}
</script>
</html>

huangxuestarrysky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM 事件下拉菜单实例
sofia92的博客
01-18 983
实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题 任务 一、 点击菜单中的向下三角展开菜单 提示: 点击三角时需阻止事件冒泡 二、 展开菜单之后，在document对象上绑定keyup事件,按下向下方向键，选中下一个选项，按下向上方向键，选中上
可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表，有demo
11-09
"多选下拉列表"和"复选下拉列表"是常见的组件，用于提供用户在一组选项中进行多个选择的功能。这些组件通常用于数据筛选、配置设置或信息录入等场景。本主题将深入探讨基于jQuery的多选下拉列表插件及其应用。 1. *...
08-DOM操作多选下拉列表
高调做事，低调做人！
10-08 401
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> Insert title here
javascript操作多选下拉列表
weixin_30779691的博客
08-09 140
闲来无事，把javascript操作多选下拉列表有关的操作知识复习了一遍，代码附上 <%-- Created by IntelliJ IDEA. User: Administrator Date: 2014/8/9 Time: 18:05 To change this template use File | Settings | File Templates.--%>&lt...
【JavaScript】DOM操作下拉框
weixin_34007886的博客
08-30 235
DOM操作下拉框 这次要实现一个效果，如下图: 在左边选框里选择一个选项，点击"-->"，就会把该选项选到右边框里。 在左边选框里选择多个选项，点击"==>"，就会把多个选项选到右边框里。 在右边选框里选择一个选项，点击"-->"，就会把该选项选到左边框里。 在右边选框里选择多个选项，点击"==>"，就会把多个选项选到左边框里。...
DOM为列表框、下拉菜单添加、删除选项
lx__angel的博客
12-08 1696
DOM为列表框、下拉菜单添加选项 创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来构造一个选项出来。 new Option( text ,value , defaultSelected ,selected) 该构造器有4个参数，说明如下； 提示并不需要都指明四个参数，指明一个或者两个都可以，假如一个的话知名的是text,两个的话就是text v
jQuery+vue.js实现的多选下拉列表功能示例
10-17
在本示例中，我们将探讨如何使用jQuery和Vue.js结合实现一个多选下拉列表的功能。这个功能的主要目的是创建一个可选择多个选项的下拉菜单，并将选定的选项展示在适当的位置。首先，我们来看看HTML结构，它包含了一个...
js多选下拉列表
03-05
至于**jQuery多选列表**，jQuery库提供了丰富的DOM操作和事件处理功能，使得动态创建和操作多选下拉列表变得简单。例如，可以使用jQuery插件如`select2`或`multi-select`来增强默认的HTML下拉列表。这些插件提供更...
下拉列表多选
11-22
在网页设计中，"下拉列表多选"是一种常见的用户交互元素，允许用户在下拉菜单中选择一个或多个选项。这种功能在许多网站和应用中都有应用，比如表单填写、设置配置等场景。本项目是针对这个功能进行了一些自定义的...
Jquery多选下拉列表插件jquery multiselect
06-15
总之，jQuery Multiselect是一个强大且灵活的多选下拉列表插件，它为开发者提供了丰富的功能和自定义选项，让网页中的选择操作变得更加便捷和美观。无论你是做企业级项目还是个人网站，都可以考虑使用jQuery ...
前端js 节点dom操作 单选 下拉 复选 二级联动 这一篇都有
xinpz的博客
10-20 638
&lt;%@ page language="java" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getSer...
DOM控制多选框练习
weixin_46564011的博客
01-09 434
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Javascript之DOM(下拉列表操作)
summer7310的专栏
06-07 1433
下拉列表框select的操作和其他操作有一些区别
下拉列表左右选择--DOM
村西头的俏寡妇
03-29 289
* { margin:0; padding:0; } div.centent { float:left; text-align: center; margin: 10px; } span { display:block; margin:2px 2px; padding:4px 10px; background:#898989; cursor:pointer; f
下拉列表 级联菜单操作
11-30 6796
function selcity(){ var arr = [["--选择城市--"],["海定区","东城区","西城区","朝阳区"],["济南","青岛","日照","威海"], ["长沙","郴州","岳阳","株洲"],["广州","深圳","惠州","东莞"]]; var index = document.getElementById("selID")
获取多个复选框值
秋风伴落叶
04-10 1667
//复选框nmae相同checkOrderCodeInfoItem 且没有被选中的 var notcheckOrderCodeInfoItem=$("input[name='checkOrderCodeInfoItem']").not("input:checked").each(function(i){ }); //复选框nmae相同checkOrderCodeInfoItem 且被选中的
checkbox的全选和获取多选框的值
zzh19911的博客
11-18 579
自己在工作中遇到的小问题，在此记录一下： 使用checkbox控件时，全选和全不选功能操作 页面：全选时不能使用attr，因为只能使用一次，多次会失效 全选/全不选 js： content.find('[name=checkAll]').on('click',function(){ if($(this).is(":checked")) $("[name=...
获取dom对象中select的显示文本值和value值
lvjianyu2007的专栏
07-01 3837
无标题文档 $(document).ready(function(){ $("select[name='expType']").change(function(){ var selectedIndex = this.selectedIndex; var selectedOption = this[selectedIndex]; $("input[na

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值