js操作select標籤

select的動態新增、刪除、移動、獲取選中項的值、排序等等操作。

function addoption(obj,text,value,title)

seltarget.add(op);

}1、向select裡新增option

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

function fnadditem(text,value)

2、刪除select裡的option

function fnremoveitem()}}

}3、移動select裡的option到另乙個select中

function fnmove(fromselectid,toselectid)}}

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

var ooption = sel.options[i]

var oprevoption = sel.options[i-1]

sel.insertbefore(ooption,oprevoption);向下移動同理

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時，不進行操作。

例如： 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()

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

for(i=0;iif (acomp < bcomp)

return -1;

if (acomp > bcomp)

return 1;

return 0;

}排序時還可以有更多選項，比如將value值看做integer或是string進行排序，得到的結果是不一樣的。

JS對HTML標籤select的操作

空 1 獲得html控制項 var select document.getelementsbyname aaa 0 select.selectedindex index 建立新的option物件 new option text,value new option text,value,defaults...

使用js操作select標籤以及增添css類

jquery用多了，有點忘了js是怎麼操作select標籤。今天有空就總結一下。abc 拿到select物件 const select documen.getelementbyid selecttest 拿到選中option索引 const selectedindex select.selected...

jquery對select標籤的操作

需要注意的是，這裡的 好多是針對jquery 1.32以前的版本 以後的版本已經不支援 所以替換為空測試下即可。jquery獲取select選擇的text和value 語法解釋 1.select id change function 為select新增事件，當選擇其中一項時觸發 2.var chec...