<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="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </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.onload=function(){ /*************************************************************************************************************/ //选中的从左端移到右端 //<input name="add" id="add" type="button" class="button" value="-->" /> document.getElementById("add").onclick=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]); } } } //------------------------------- //全部移动 document.getElementById("add_all").onclick=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"); //遍历option for(var i=0;i<len;i++){ secondElement.appendChild(optionElements[0]); } } //全部移动简化的 /* document.getElementById("add_all").onclick=function() { var firstElement=document.getElementById("first"); var secondElement=document.getElementById("second"); var optionElements=firstElement.getElementsByTagName("option"); var len=firstElement.length; //遍历option for(var i=0;i<len;i++){ secondElement.appendChild(optionElements[0]); } } */ //双击从左边移动到右边 /* document.getElementById("first").ondblclick=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").ondblclick=function() { var secondElement=document.getElementById("second"); secondElement.appendChild(this[this.selectedIndex]); } //选中的从右到左 document.getElementById("remove").onclick=function() { var secondElement=document.getElementById("second"); //获取option var optionElements=secondElement.getElementsByTagName("option"); var len=optionElements.length; //alert(len) //获取右边<select name="second" size="10" multiple="multiple" class="td3" id="second"> var firstElement=document.getElementById("first"); //遍历option for(var i=0;i<len;i++){ if (secondElement.selectedIndex != -1) { firstElement.appendChild(optionElements[secondElement.selectedIndex]); } } } //全部的左移 document.getElementById("remove_all").onclick=function() { var secondElement=document.getElementById("second"); var firstElement=document.getElementById("first"); var optionElements=secondElement.getElementsByTagName("option"); var len=secondElement.length; //遍历option for(var i=0;i<len;i++){ firstElement.appendChild(optionElements[0]); } } //双击左移 document.getElementById("second").ondblclick=function() { var firstElement=document.getElementById("first"); firstElement.appendChild(this[this.selectedIndex]); } } </script> </html>
详细解决方案
Dom操作小范例-非常实用,将数据在两个select之间转移
热度:185 发布时间:2013-10-06 18:25:14.0
相关解决方案
- Struts2 <select>上拉框 回显有关问题
- 關於Struts2 select tag 問題,该怎么处理
- <xsl:for-each select= 取嵌套节点则么写,该如何解决
- <select>标签可平添文字
- Struts2 <s:select/>有关问题
- jsp页面<select>选中有关问题
- struts2 中用两个<s:select>标签如何实现级联的效果
- <s:select>标签,小弟我要通过js获取listKey的值要如何获取
- <s:select>解决办法
- 关于strust2 <s:select>标签组值有关问题
- select count(*)as num from hall where Hall_No=10000001关于这个SQL语句,怎么取出返回的数字
- js里如何取<s:select>标签里的值
- Eclipse导入工程后,XDoclet异常:Missing library: xdoclet-1.2.1.jar. Select the home direc
- magaView.HasMonth = db.Library.GroupBy(a => a.TimeBook.Month).Select(a => a.Key),该怎么处理
- string sql = @"select."该如何处理
- 经过后台代码为html控件<select>绑定数据?求大神指点!
- 标签<select>事件,该如何处理
- SELECT RUNAT="SERVER" ONCHANGE,该怎么处理
- .net怎么用ajax,js 为标签<select>动态添加数据
- sqltxet能不能这么写成"select *rowid from table"
- Select @NewID,该怎么解决
- select * from BigClass where FatherID=? order by Order desc解决思路
- 错误详细信息: System.Data.OleDb.OleDbException: SELECT 子句中包含一个保留字、拼写异常或丢失的参数,或标点符号不正确
- select 约束中怎么将text所填写的内容作为约束条件
- select SCOPE_IDENTITY失效
- 页面上有个<select></select>用js或jq或后台写个循环生成一个连续的年份如2000-2012然后添加到select下拉框,value值对应年份解决方案
- select * from lesson where username='name' order by id desc解决思路
- 请教dt.select()中的条件可以是大小判断吗
- 语法异常。 在查询表达式 'ID not in (select top 12*1 ID from prod_news order by infotime des
- .NET MVC3 from mvc3 select,该怎么解决