javascript
JavaScript操作select标签详解
獲取select值
獲取顯示的漢字
document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text
獲取數據庫中的id
window.document.getElementById("bigclass").value
獲取select組分配的索引id
window.document.getElementById("bigclass").selectedIndex
例子：
<select name="bigclass" id="bigclass" onChange="javascript:updatePage2();">
<option value="" selected="selected">ajax實驗</option>
<option value="4">我適宜市哈</option>
</select>
使用
document.getElementById("bigclass").options[window.document.getElementById("bigclass").selectedIndex].text
的結果是：我適宜市哈
使用
window.document.getElementById("bigclass").value
的結果是：4
使用
window.document.getElementById("bigclass").selectedIndex
的結果是：1
一、新增一個option
??? var sel=document.getElementById("select的id");
??? var op=document.createElement_x("option");
???? op.value=值;
???? op.text=顯示文本;
???? sel.add(op);
二、刪除一個option
??? var sel=document.getElementById("typelist");
if(sel.selectedIndex==-1)
?? alert("請選中要刪除的項!");
for(var i=0;i<sel.options.length;i++){
if(sel.options[i].selected){
sel.options.remove(i);
break;
}
}
三、清空select的所有option
?? var citySel=document.getElementById("select的id");
?? citySel.options.length=0;
??
四、獲得選中項的值
??? var citySel=document.getElementById("select的id");
??? var selectedValue=citySel.value;
五、獲得當前選中項的索引
??? var selectedIndex=document.all.objSelect.selectedIndex;
六、設置select的當前選中項
??? 方法1(單個select)： document.getElementById("products_type_id").selectedIndex=1;
??? 方法2(級聯select如省市級聯)：
???? var province_sel=document.getElementById("province");//獲得省select
var city_sel=document.getElementById("city");//獲得市select
for(var i=0;i<province_sel.options.length;i++){
if(province_sel.options[i].value=="從數據庫獲取的省的值"){
??? province_sel.options[i].selected=true;
break;
}
}
initCity("從數據庫獲取的省的值");//初始化市select
for(var i=0;i<city_sel.options.length;i++){
if(city_sel.options[i].value=="${city}"){
??? city_sel.options[i].selected=true;
break;
}
}
七、創建select動態設置選中項
?? var sel=document.getElementById("other_state");
???? var sel_val=document.getElementById("other_media_id").innerHTML;
????
for(var obj in data){
var id=data[obj]["other_media_id"];??
var name=data[obj]["other_media_name"];
var op=document.createElement_x("option");
op.setAttribute("value",id);
op.appendChild(document.createTextNode(name));?????
?????????? if(id==sel_val){
op.setAttribute("selected","true");
?? }
??????????? sel.appendChild(op);
}
?
?
?
?
1、向Select里添加Option
function fnAddItem(text,value)
??????? {
??????????? var selTarget = document.getElementById("selID");
??????????? selTarget.Add(new Option("text","value"));
??????? }
2、刪除Select里的Option
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中
??????? 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 里的代碼也可用下面幾句代碼代替
var op = from.options[i];
to.options.add(new Option(op.text, op.value));
from.remove(i);
4、Select里Option的上下移動
??????? 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操作都將導致整個頁面的重新布局，所以不如直接修改元素的屬性值。
??????????????????????? var oOption = sel.options[i]
??????????????????????? var oPrevOption = sel.options[i-1]
??????????????????????? sel.insertBefore(oOption,oPrevOption);
向下移動同理
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時，不進行操作。
例如：
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++)
??? {
??????? 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進行排序，得到的結果是不一樣的。
總結
以上是生活随笔為你收集整理的JavaScript操作select标签详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dynamic-insert=true
- 下一篇： JavaScript中window对象属