Javascript動態修改select選項

2021-08-26 09:13:46 字數 2652 閱讀 4388

1、向select裡新增option

js**

//ie only,ff不支援add方法  

function fnadditem(text,value)   

//ie ff both ok  

function fnadd(olistbox, sname, svalue)   

}  

2、刪除select裡的option

js**

function fnremoveitem()   

}  }  

}   

function fnremoveitem()   


}  }  


js** 


var op = from.options[i];  


to.options.add(new option(op.text, op.value));  


from.remove(i);  


var op = from.options[i]; to.options.add(new option(op.text, op.value)); from.remove(i);
4、select裡option的上下移動

js**

function fnup()   

}  }  

}   

function fnup()           }      }  }
在進行上下兩項互換時，也可以使用以下**，但是效率很低，因為每一次的dom操作都將導致整個頁面的重新布局，所以不如直接修改元素的屬性值。

js**

var ooption = sel.options[i]  

var oprevoption = sel.options[i-1]  

sel.insertbefore(ooption,oprevoption);  

var ooption = sel.options[i]  var oprevoption = sel.options[i-1]  sel.insertbefore(ooption,oprevoption);
向下移動同理

js**

function fndown()   

}  }  

}   

function fndown()           }      }  }
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**

function fncompare(a,b)   

var arr = new array();  

//add some value into arr  

arr.sort(fncompare);  

//這裡sort的操作結果就是arr裡的項按由小到大的公升序排序  

//如果把fncompare裡改為  

//if (a 

// return 1;  

//if (a > b)  

// return -1;  

//return 0;  

//則sort的結果是降序排列  

好，下面就是對select裡option的排序  

//因為排序可以按option的value排序，也可以按text排序，這裡只演示按value排序  

function sortitem()   

arrlength = arr.length;  

arr.sort(fnsortbyvalue);//排序  

//先將原先的option刪除  

while(sellength--)   

//將經過排序的option放回select中  

for(i=0;ifnadd(sel,arr[i].text,arr[i].value);  

option(arr[i].text,arr[i].value));  

}  }  

function fnsortbyvalue(a,b)   

function fncompare(a,b)     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()
排序時還可以有更多選項，比如將value值看做integer或是string進行排序，得到的結果是不一樣的。篇幅限制，不在多做介紹。

如何用javascript動態修改css檔案

有乙個css檔案 abc.css 內容如下 class1 要動態查詢到這個類並修改裡面的屬性.我找到的操作方法是使用dom的stylesheets集合。先在頁面加上 然後呼叫document.stylesheets 0 得到這個css檔案的引用，再根據一些子屬性可以定位到這個 class1 但怎麼把...

JavaScript 修改this指標

封裝函式 f，使 f 的 this 指向指定的物件 bindthis function a,b 2,3 輸出例子 6分析 該題目的要求是 封裝乙個函式bindthis，該函式有兩個引數，第乙個引數是乙個內部有使用this指標的函式f，第二個引數是乙個物件obj，執行bindthis之後，返回乙個函式...

JavaScript動態載入

在做專案的過程中需要用到動態載入，如何做，剛開始很為難。什麼是動態載入呢？比如說，新增便簽時，在往庫里插入資料的同時需要顯示在介面上，新增資料後重新整理頁面是可以獲得，但是沒插入一條資料都要重新整理介面的話，不僅麻煩，還很慢。所以就需要用到動態載入。經過不懈努力，其實，也就是動態拼接字串而已。再新增...