首页 新闻 搜索 专区 学院

select下拉选框

0
悬赏园豆:30 [待解决问题]

求一个下拉选框的代码,

需求: 左右两侧各一个下拉选框,左侧的为页面初始化时自动加载出来的部门列表(带层级关系,由空格显示的层次关系),右侧为从左侧选中的选项,在左右两个下拉选框中间有两个按钮,左移和右移。

注:从数据库中查出来的数据的顺序是排列好的

要求实现功能:左移或右移的时候,部门的层级关系不能改变(顺序不可改变)。当左侧往右侧移动了三个选项的时候,再从右侧往左侧移动的时候,必须插到改选项原来的位置。

求个大牛帮帮忙解决一下。急急急等

巴托罗密奥的主页 巴托罗密奥 | 初学一级 | 园豆:28
提问于:2017-02-27 14:33
< >
分享
所有回答(5)
0

跟下拉框没什么关系吧。
新建一个表里保存 右边的数据就好了啊。
没有必要来回删改数据吧。


长蘑菇星人 | 园豆:1832 (小虾三级) | 2017-02-27 14:38

需求是那样的,不能改

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 14:40

@巴托罗密奥: 难道不从数据库重新刷?


支持(0) 反对(0) 长蘑菇星人 | 园豆:1832 (小虾三级) | 2017-02-27 14:46
0

是不是就是左移右移位置不变?

那就搞一个与位置相关的值,保证位置就可以了啊

半路独行 | 园豆:574 (小虾三级) | 2017-02-27 15:35

试过,没做出来

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 16:55
0

要使位置不变,直接给每一项元素添加一个自定义属性,parentId,移回来的时候去除该项parentId,放到id等于该选项parentId下即可,如果排序也要,那就在增加一个自定义属性,用于排序,回来的时候按照序号入列。建议不要用select,写个自定义的列表,方便操作。

龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-27 16:45

领导要求,必须用select,而且也试过往option标签中添加了一个自定义的属性,用来排序,但是最后他不按照指定的位置插入,这就尴尬了

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 16:55

@巴托罗密奥: 用select也行,你们领导也真是的。不按指定位置插入,那就是你代码的问题了。

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-27 16:58

@程序人生,永无止境: 我用childNodes指定的插入位置,前面4个位置可以按顺序来,后边的顺序只要一错,前面的也就错了,后来上网百度,说是childNodes有那个空文本节点和浏览器的兼容性问题,推荐使用children,然后就用了children,结果还是不行  ==

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 17:03

@巴托罗密奥: 你用的什么东西,还有childNodes

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-27 17:05

@程序人生,永无止境:childNodes是用来指定插入的位置的啊,每个option标签中都有一个index属性,用来排序用的,然后就是将选中的那侧的选中项的index跟另一侧的index值进行循环对比,比大小,然后用childNodes来指定插入到那个位置

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 17:09

@巴托罗密奥: 右边需要排序吗,需要分层级关系吗

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-27 17:18

@程序人生,永无止境: 需要

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-27 18:01

@巴托罗密奥: 这个问题不用select会方便许多,一定要用select的话好麻烦。你们领导是搞技术的吗,如果是搞技术的,这样做又有什么意义,不是搞技术的就好理解了。

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-27 20:30

@程序人生,永无止境: 不用select的话,用什么比较好实现呢?

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-28 15:24

@巴托罗密奥: li

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-02-28 17:46

@程序人生,永无止境: 怎么用?li标签怎么去实现?

支持(0) 反对(0) 巴托罗密奥 | 园豆:28 (初学一级) | 2017-02-28 17:49

@巴托罗密奥: 同你使用select的思路是一样的,也是根据一个自定义属性,父级id和排序,无论移动到哪一边,只需要取出pid,再在这个pid下排序,只不过使用li的话html的布局层级结构要清晰很多,也方便操作。

支持(0) 反对(0) 龙行天涯 | 园豆:1821 (小虾三级) | 2017-03-01 16:59
0

 

<option value="1"  style="display:none">选项1</option>

1、左往右移的时候,加隐藏display:none 样式;

2、右往左移动时,jquery选择value值相同的获得对象把隐藏样式删了;

3、最后保存的时候,左侧下拉只获得所有不隐藏的option对象,传入后台保存,右侧直接保存option数据;

一句话:不要真删除,只用样式隐藏。

zuoluo11 | 园豆:8 (初学一级) | 2017-03-02 08:51
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>

 

巴托罗密奥 | 园豆:28 (初学一级) | 2017-03-03 11:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册