select下拉选框
0
悬赏园豆：30
[待解决问题]
求一个下拉选框的代码，
需求： 左右两侧各一个下拉选框，左侧的为页面初始化时自动加载出来的部门列表(带层级关系，由空格显示的层次关系)，右侧为从左侧选中的选项，在左右两个下拉选框中间有两个按钮，左移和右移。
注：从数据库中查出来的数据的顺序是排列好的
要求实现功能：左移或右移的时候，部门的层级关系不能改变(顺序不可改变)。当左侧往右侧移动了三个选项的时候，再从右侧往左侧移动的时候，必须插到改选项原来的位置。
求个大牛帮帮忙解决一下。急急急等
所有回答(5)
0
跟下拉框没什么关系吧。
新建一个表里保存 右边的数据就好了啊。
没有必要来回删改数据吧。
需求是那样的，不能改
@巴托罗密奥: 难道不从数据库重新刷？
0
是不是就是左移右移位置不变?
那就搞一个与位置相关的值,保证位置就可以了啊
试过，没做出来
0
要使位置不变，直接给每一项元素添加一个自定义属性，parentId，移回来的时候去除该项parentId,放到id等于该选项parentId下即可，如果排序也要，那就在增加一个自定义属性，用于排序，回来的时候按照序号入列。建议不要用select，写个自定义的列表，方便操作。
领导要求，必须用select，而且也试过往option标签中添加了一个自定义的属性，用来排序，但是最后他不按照指定的位置插入，这就尴尬了
@巴托罗密奥: 用select也行，你们领导也真是的。不按指定位置插入，那就是你代码的问题了。
@程序人生，永无止境: 我用childNodes指定的插入位置，前面4个位置可以按顺序来，后边的顺序只要一错，前面的也就错了，后来上网百度，说是childNodes有那个空文本节点和浏览器的兼容性问题，推荐使用children，然后就用了children，结果还是不行 ==
@巴托罗密奥: 你用的什么东西，还有childNodes
@程序人生，永无止境:childNodes是用来指定插入的位置的啊，每个option标签中都有一个index属性，用来排序用的，然后就是将选中的那侧的选中项的index跟另一侧的index值进行循环对比，比大小，然后用childNodes来指定插入到那个位置
@巴托罗密奥: 右边需要排序吗，需要分层级关系吗
@程序人生，永无止境: 需要
@巴托罗密奥: 这个问题不用select会方便许多，一定要用select的话好麻烦。你们领导是搞技术的吗，如果是搞技术的，这样做又有什么意义，不是搞技术的就好理解了。
@程序人生，永无止境: 不用select的话，用什么比较好实现呢？
@巴托罗密奥: li
@程序人生，永无止境: 怎么用？li标签怎么去实现？
@巴托罗密奥: 同你使用select的思路是一样的，也是根据一个自定义属性，父级id和排序，无论移动到哪一边，只需要取出pid，再在这个pid下排序，只不过使用li的话html的布局层级结构要清晰很多，也方便操作。
0
<option value="1" style="display:none">选项1</option>
1、左往右移的时候，加隐藏display:none 样式；
2、右往左移动时，jquery选择value值相同的获得对象把隐藏样式删了；
3、最后保存的时候，左侧下拉只获得所有不隐藏的option对象，传入后台保存，右侧直接保存option数据；
一句话：不要真删除，只用样式隐藏。
0
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <SCRIPT LANGUAGE="JavaScript"> 6 <!-- Begin 7 sortitems = 1; // Automatically sort items within lists? (1 or 0)，自动排序列表，1-表示排序，0-表示不排序 8 9 //获得传出的下拉选框的对象，获得传入的下拉选框对象 10 function move(fbox,tbox) { 11 //对传出的下拉框对象进行循环 12 for(var i=0; i<fbox.options.length; i++) { 13 //如果有被选中项并且value不为空 14 if(fbox.options[i].selected && fbox.options[i].value != "") { 15 //创建一个option对象no 16 var no = new Option(); 17 //将传出对象中选中项的value和text放到option对象no中 18 no.value = fbox.options[i].value; 19 no.text = fbox.options[i].text; 20 //将no赋值给传入对象tbox 21 tbox.options[tbox.options.length] = no; 22 //将选中项置空 23 fbox.options[i].value = ""; 24 fbox.options[i].text = ""; 25 } 26 } 27 28 BumpUp(fbox); 29 if (sortitems) SortD(tbox); 30 } 31 //将空值替补掉（后往前传） 32 function BumpUp(box) { 33 //循环传出对象 34 for(var i=0; i<box.options.length; i++) { 35 //如果传出对象的value值为"",即是传出项(在上一个function中最后置空的) 36 if(box.options[i].value == "") { 37 //循环传出对象 38 for(var j=i; j<box.options.length-1; j++) { 39 //将空值项用后边有值项代替 (去掉空值项) 40 box.options[j].value = box.options[j+1].value; 41 box.options[j].text = box.options[j+1].text; 42 } 43 //将i的值赋给ln 44 var ln = i; 45 break; 46 } 47 } 48 //如果ln小于传出项的长度，说明还有空项，将长度减一（因为上面已经执行过一次循环了），再次执行BumpUp方法，直至没有空项为止 49 if(ln < box.options.length) { 50 box.options.length -= 1; 51 BumpUp(box); 52 } 53 } 54 function par (a,b){ 55 return a - b; 56 } 57 /**对传入对象进行排序**/ 58 function SortD(box) { 59 //创建一个集合对象 60 var temp_opts = new Array(); 61 //创建一个父对象 62 var temp = new Object(); 63 //循环传出对象，将传出对象里面的选项放到集合中去 64 for(var i=0; i<box.options.length; i++) { 65 temp_opts[i] = box.options[i]; 66 } 67 //循环集合对象，进行排序 68 for(var x=0; x<temp_opts.length-1; x++) { 69 for(var y=(x+1); y<temp_opts.length; y++) { 70 71 var a=temp_opts[x].value; 72 var b=temp_opts[y].value; 73 if(temp_opts[x].value > temp_opts[y].value) { 74 temp = temp_opts[x].text; 75 temp_opts[x].text = temp_opts[y].text; 76 temp_opts[y].text = temp; 77 temp = temp_opts[x].value; 78 temp_opts[x].value = temp_opts[y].value; 79 80 temp_opts[y].value = temp; 81 } 82 } 83 } 84 //最后将排序好的集合再赋给传入对象 85 for(var i=0; i<box.options.length; i++) { 86 box.options[i].value = temp_opts[i].value; 87 box.options[i].text = temp_opts[i].text; 88 } 89 } 90 91 // End --> 92 </script> 93 </head> 94 <body> 95 <form ACTION="" METHOD="POST"> 96 <table border="0"> 97 <tr> 98 <td><select multiple size="10" name="list1"> 99 <option value="11"> team1.1</option> 100 <option value="12"> team1.2</option> 101 <option value="13"> team1.3</option> 102 <option value="14"> team1.4</option> 103 <option value="15"> team1.5</option> 104 <option value="16"> team1.6</option> 105 <option value="17"> team1.7</option> 106 <option value="18"> team1.8</option> 107 <option value="19"> team1.9</option> 108 <option value="20"> team2.0</option> 109 </select></td> 110 <td> 111 <input type="button" value=" >> " onclick="move(this.form.list1,this.form.list2)" name="B1"> 112 113 <input type="button" value=" << " onclick="move(this.form.list2,this.form.list1)" name="B2"> 114 </td> 115 <td><select multiple size="10" name="list2"> 116 <option value="21"> team2.1</option> 117 <option value="22"> team2.2</option> 118 <option value="23"> team2.3</option> 119 <option value="24"> team2.4</option> 120 <option value="25"> team2.5</option> 121 <option value="26"> team2.6</option> 122 <option value="27"> team2.7</option> 123 </select></td> 124 </tr> 125 </table> 126 </form> 127 可以同时选择好几个项目左右移动 128 129 </body> 130 </html>
