Javascript动态修改select选项

Javascript动态修改select选项

1、向Select里添加Option

Js代码

1. //IE only,FF不支持Add方法  
2. function fnAddItem(text,value) {  
3.     var selTarget = document.getElementById("selID");  
4.     selTarget.Add(new Option("text","value"));  
5. }  
6.   
7. //IE FF both OK  
8. function fnAdd(oListbox, sName, sValue) {  
9.     var oOption = document.createElement("option");  
10.     oOption.appendChild(document.createTextNode(sName));  
11.   
12.     if (arguments.length == 3) {  
13.         oOption.setAttribute("value", sValue);  
14.     }  
15.   
16.     oListbox.appendChild(oOption);  
17. }  

//IE only,FF不支持Add方法  function fnAddItem(text,value) {      var selTarget = document.getElementById("selID");      selTarget.Add(new Option("text","value"));  }    //IE FF both OK  function fnAdd(oListbox, sName, sValue) {      var oOption = document.createElement("option");      oOption.appendChild(document.createTextNode(sName));        if (arguments.length == 3) {          oOption.setAttribute("value", sValue);      }        oListbox.appendChild(oOption);  }

 

2、删除Select里的Option

Js代码

1. function fnRemoveItem() {  
2.     var selTarget = document.getElementById("selID");  
3.     if(selTarget.selectedIndex > -1) {//说明选中  
4.         for(var i=0;i<selTarget.options.length;i++) {  
5.             if(selTarget.options[i].selected) {  
6.                 selTarget.remove(i);  
7.                 i = i - 1;//注意这一行  
8.             }  
9.         }  
10.     }  
11. }   

function fnRemoveItem() {      var selTarget = document.getElementById("selID");      if(selTarget.selectedIndex > -1) {//说明选中          for(var i=0;i<selTarget.options.length;i++) {              if(selTarget.options[i].selected) {                  selTarget.remove(i);                  i = i - 1;//注意这一行              }          }      }  } 

 

3、移动Select里的Option到另一个Select中

Js代码

1. function fnMove(fromSelectID,toSelectID) {  
2.     var from = document.getElementById(fromSelectID);  
3.     var to = document.getElementById(toSelectID);  
4.   
5.     for(var i=0;i<from.options.length;i++) {  
6.         if(from.options[i].selected) {  
7.             to.appendChild(from.options[i]);  
8.             i = i - 1;  
9.         }  
10.     }  
11. }  

function fnMove(fromSelectID,toSelectID) {      var from = document.getElementById(fromSelectID);      var to = document.getElementById(toSelectID);        for(var i=0;i<from.options.length;i++) {          if(from.options[i].selected) {              to.appendChild(from.options[i]);              i = i - 1;          }      }  }

 

if 里的代码也可用下面几句代码代替

Js代码

1. var op = from.options[i];  
2. to.options.add(new Option(op.text, op.value));  
3. from.remove(i);  

var op = from.options[i];  to.options.add(new Option(op.text, op.value));  from.remove(i);

 

4、Select里Option的上下移动

Js代码

1. function fnUp() {  
2.     var sel = document.getElementById("selID");  
3.     for(var i=1; i < sel.length; i++) {//最上面的一个不需要移动，所以直接从i=1开始  
4.         if(sel.options[i].selected) {  
5.             if(!sel.options.item(i-1).selected) {//上面的一项没选中，上下交换  
6.                 var selText = sel.options[i].text;  
7.                 var selValue = sel.options[i].value;  
8.   
9.                 sel.options[i].text = sel.options[i-1].text;  
10.                 sel.options[i].value = sel.options[i-1].value;  
11.                 sel.options[i].selected = false;  
12.   
13.                 sel.options[i-1].text = selText;  
14.                 sel.options[i-1].value = selValue;  
15.                 sel.options[i-1].selected=true;  
16.             }  
17.         }  
18.     }  
19. }  

function fnUp() {      var sel = document.getElementById("selID");      for(var i=1; i < sel.length; i++) {//最上面的一个不需要移动，所以直接从i=1开始          if(sel.options[i].selected) {              if(!sel.options.item(i-1).selected) {//上面的一项没选中，上下交换                  var selText = sel.options[i].text;                  var selValue = sel.options[i].value;                    sel.options[i].text = sel.options[i-1].text;                  sel.options[i].value = sel.options[i-1].value;                  sel.options[i].selected = false;                    sel.options[i-1].text = selText;                  sel.options[i-1].value = selValue;                  sel.options[i-1].selected=true;              }          }      }  }

 

在进行上下两项互换时，也可以使用以下代码，但是效率很低，因为每一次的Dom操作都将导致整个页面的重新布局，所以不如直接修改元素的属性值。

Js代码

1. var oOption = sel.options[i]  
2. var oPrevOption = sel.options[i-1]  
3. sel.insertBefore(oOption,oPrevOption);  

var oOption = sel.options[i]  var oPrevOption = sel.options[i-1]  sel.insertBefore(oOption,oPrevOption);

 

向下移动同理

Js代码

1. function fnDown() {  
2.     var sel = fnGetTarget("selLeftOrRight");  
3.     for(var i=sel.length -2; i >= 0; i--) {//向下移动，最后一个不需要处理，所以直接从倒数第二个开始  
4.         if(sel.options.item(i).selected) {  
5.             if(!sel.options.item(i+1).selected) {//下面的Option没选中，上下互换  
6.                 var selText = sel.options.item(i).text;  
7.                 var selValue = sel.options.item(i).value;  
8.   
9.                 sel.options.item(i).text = sel.options.item(i+1).text;  
10.                 sel.options.item(i).value = sel.options.item(i+1).value;  
11.                 sel.options.item(i).selected = false;  
12.   
13.                 sel.options.item(i+1).text = selText;  
14.                 sel.options.item(i+1).value = selValue;  
15.                 sel.options.item(i+1).selected=true;  
16.             }  
17.         }  
18.     }  
19. }  

function fnDown() {      var sel = fnGetTarget("selLeftOrRight");      for(var i=sel.length -2; i >= 0; i--) {//向下移动，最后一个不需要处理，所以直接从倒数第二个开始          if(sel.options.item(i).selected) {              if(!sel.options.item(i+1).selected) {//下面的Option没选中，上下互换                  var selText = sel.options.item(i).text;                  var selValue = sel.options.item(i).value;                    sel.options.item(i).text = sel.options.item(i+1).text;                  sel.options.item(i).value = sel.options.item(i+1).value;                  sel.options.item(i).selected = false;                    sel.options.item(i+1).text = selText;                  sel.options.item(i+1).value = selValue;                  sel.options.item(i+1).selected=true;              }          }      }  }

 

5、Select里Option的排序
这里借助Array对象的sort方法进行操作，sort方法接受一个function参数，可以在这个function里定义排序时使用的算法逻辑。
array.sort([compareFunction]) 里compareFunction接受两个参数(p1,p2)，sort操作进行时，array对象会每次传两个值进去，进行比 较；compareFunciton必须返回一个整数值：当返回值>0时，p1会排在p2后面；返回值<0时，p1会排在p2前面；返回 值=0时，不进行操作。
例如：

Js代码

1. function fnCompare(a,b) {  
2.     if (a < b) return -1;  
3.     if (a > b) return 1;  
4.     return 0;  
5. }  
6.   
7. var arr = new Array();  
8. //add some value into arr  
9. arr.sort(fnCompare);  
10. //这里sort的操作结果就是arr里的项按由小到大的升序排序  
11. //如果把fnCompare里改为  
12. //if (a < b)  
13. // return 1;  
14. //if (a > b)  
15. // return -1;  
16. //return 0;  
17. //则sort的结果是降序排列  
18. 好，下面就是对Select里Option的排序  
19. //因为排序可以按Option的Value排序，也可以按Text排序，这里只演示按Value排序  
20. function sortItem() {  
21.     var sel = document.getElementById("selID");  
22.     var selLength = sel.options.length;  
23.     var arr = new Array();  
24.     var arrLength;  
25.   
26.     //将所有Option放入array  
27.     for(var i=0;i<selLength;i++) {  
28.         arr[i] = sel.options[i];  
29.     }  
30.     arrLength = arr.length;  
31.   
32.     arr.sort(fnSortByValue);//排序  
33.     //先将原先的Option删除  
34.     while(selLength--) {  
35.         sel.options[selLength] = null;  
36.     }  
37.     //将经过排序的Option放回Select中  
38.     for(i=0;i<arrLength;i++) {  
39.         fnAdd(sel,arr[i].text,arr[i].value);  
40.         //sel.add(new Option(arr[i].text,arr[i].value));  
41.     }  
42. }  
43.   
44. function fnSortByValue(a,b) {  
45.     var aComp = a.value.toString();  
46.     var bComp = b.value.toString();  
47.   
48.     if (aComp < bComp) return -1;  
49.     if (aComp > bComp) return 1;  
50.     return 0;  
51. }  

function fnCompare(a,b) {      if (a < b) return -1;      if (a > b) return 1;      return 0;  }    var arr = new Array();  //add some value into arr  arr.sort(fnCompare);  //这里sort的操作结果就是arr里的项按由小到大的升序排序  //如果把fnCompare里改为  //if (a < b)  // return 1;  //if (a > b)  // return -1;  //return 0;  //则sort的结果是降序排列  好，下面就是对Select里Option的排序  //因为排序可以按Option的Value排序，也可以按Text排序，这里只演示按Value排序  function sortItem() {      var sel = document.getElementById("selID");      var selLength = sel.options.length;      var arr = new Array();      var arrLength;        //将所有Option放入array      for(var i=0;i<selLength;i++) {          arr[i] = sel.options[i];      }      arrLength = arr.length;        arr.sort(fnSortByValue);//排序      //先将原先的Option删除      while(selLength--) {          sel.options[selLength] = null;      }      //将经过排序的Option放回Select中      for(i=0;i<arrLength;i++) {          fnAdd(sel,arr[i].text,arr[i].value);          //sel.add(new Option(arr[i].text,arr[i].value));      }  }    function fnSortByValue(a,b) {      var aComp = a.value.toString();      var bComp = b.value.toString();        if (aComp < bComp) return -1;      if (aComp > bComp) return 1;      return 0;  }

 

排序时还可以有更多选项，比如将value值看做Integer或是String进行排序，得到的结果是不一样的。篇幅限制，不在多做介绍。