javascript------实现multiple属性下拉框

最新推荐文章于 2023-02-16 20:37:56 发布

黄志刚

最新推荐文章于 2023-02-16 20:37:56 发布

阅读量1.5k

点赞数

分类专栏： Ajax学习笔记

本文链接：https://blog.csdn.net/u010591939/article/details/41283165

版权

Ajax学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
   String path = request.getContextPath();
   String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <base href="<%=basePath%>">

       <title>My JSP 'multiple.jsp' starting page</title>

       <meta http-equiv="pragma" content="no-cache">
       <meta http-equiv="cache-control" content="no-cache">
       <meta http-equiv="expires" content="0">
       <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
       <meta http-equiv="description" content="This is my page">
       

   </head>

   <body>
       <table width="285" height="169" border="0" align="left">
           <tr>
               <td width="126">
                   
                   <select name="first" id="first" size="10" multiple="multiple">
                       
                       <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="69" valign="middle">
                   <input type="button" name="add" id="add" value="-->">
                   <input type="button" name="addAll" id="addAll" value="==>">
                   <input type="button" name="remove" id="add" value="<--">
                   <input type="button" name="removeAll" id="add" value="<==">
               </td>
               <td>
                   <select name="second" id="second" size="10" multiple="multiple">
                       <option value="选项一">
                           选项一
                       </option>
                   </select>
               </td>
           </tr>
       </table>
   </body>
   <script type="text/javascript">
//选择的从左侧到右侧
document.getElementById("add").onclick = function() {
   //获取第一个下拉框
   var firstElement = document.getElementById("first");
   //获取第二个下拉框
   var secondElement = document.getElementById("second");
   //获取id=first下的所有option
   var allOption = document.getElementsByTagName("option");
   /**
   *   selectedIndex:改下标返回下拉列表中选择的索引值
   * 注意：在多个被选择的情况下，永远返回第一个被选中的索引值，索引值最小的那个
   *       在没有被选择的情况下，返回索引值为-1（firstElement.selectedIndex=-1）
   *       selectedIndex是select的属性
   */
   var len = allOption.length;
   for ( var i = 0; i < len; i++)
       //alert(allOption[firstElement.selectedIndex].value);
       if (firstElement.selectedIndex != -1) {
           secondElement.appendChild(allOption[firstElement.selectedIndex]);
       }
}
/******************************全部从左边移动到右边**********************************************/
document.getElementById("addAll").onclick = function() {
   //获取第一个下拉框
   var firstElement = document.getElementById("first");
   //获取第二个下拉框
   var secondElement = document.getElementById("second");
   //获取id=first下的所有option
   var allOption = document.getElementsByTagName("option");
   var len = allOption.length;
   for ( var i = 0; i < len; i++) {
       secondElement.appendChild(allOption[0]);
   }
}
/******************************双击的从左边移动到右边：方法一*********************************/
document.getElementById("first").ondblclick = function() {
   //获取第一个下拉框
   var firstElement = document.getElementById("first");
   //获取第二个下拉框
   var secondElement = document.getElementById("second");
   //获取id=first下的所有option
   var allOption = document.getElementsByTagName("option");
   var len = allOption.length;
   for ( var i = 0; i < len; i++) {
       //双击事件第一击可以看做选择，第二击可以看做移动
       if (firstElement.selectedIndex != -1) {
           secondElement.appendChild(allOption[firstElement.selectedIndex]);
       }
   }
}
/******************************双击的从左边移动到右边：方法二**********************************************/
document.getElementById("first").ondblclick = function() {
   //获取第二个下拉框
   var secondElement = document.getElementById("second");
   /**
   *this表示当前选择的下拉框
   *this.selectedIndex 表示双击事件选中的值
   */
   secondElement.appendChild(this[this.selectedIndex]);
}

/******************************全部从右边移动到左边**********************************************/

。。。。。。。。

</script>
</html>

黄志刚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript------实现multiple属性下拉框

String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%> ">
复制链接

扫一扫