js select option物件小結

作者：Eve Cole 更新時間：2025-01-30 13:48:02

一基礎理解:

var e = document.getElementById("selectId");

e. options= new Option("文字","值") ;

//建立一個option物件,即在<select>標籤中建立一個或多個<option value="值">文字</option>

//options是個陣列,裡面可以存放多個<option value="值">文字</option>這樣的標籤

1:options[ ]陣列的屬性:

length屬性---------長度屬性

selectedIndex屬性--------目前被選取的方塊中的文字的索引值,此索引值是記憶體自動分配的(0,1,2,3.....)對應(第一個文本值,第二個文字值,第三個文字值,第四個文字值..........)

2:單一option的屬性(---obj.options[obj.selecedIndex]是指定的某個<option>標籤,是一個---)

text屬性---------返回/指定文本

value屬性------傳回/指定值，與<options value="...">一致。

index屬性-------傳回下標,

selected 屬性-------傳回/指定該物件是否被選取.透過指定true 或false，可以動態的改變選取項

defaultSelected 屬性-----傳回該物件預設是否被選取。 true / false。

3:option的方法

增加一個<option>標籤-----obj.options.add(new("文字","值"));<增>

刪除一個<option>標籤-----obj.options.remove(obj.selectedIndex)<刪>

取得一個<option>標籤的文字-----obj.options[obj.selectedIndex].text<查>

修改一個<option>標籤的值-----obj.options[obj.selectedIndex]=new Option("新文字","新值")<改>

刪除所有<option>標籤-----obj.options.length = 0

取得一個<option>標籤的值-----obj.options[obj.selectedIndex].value

注意:

a:上面的寫的是如這樣類型的方法obj.options.function()而不寫obj.funciton,是因為為了考慮在IE和FF 下的兼容,如obj.add()只能在IE中有效.

b:obj.option中的option不需要大寫,new Option中的Option需要大寫

二應用

複製代碼代碼如下:

<html>

<head>

function number(){

var obj = document.getElementById("mySelect");

//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在目前選取的那個的值中改變

//obj.options.add(new Option("我的吃吃","4"));再增加一個option

//alert(obj.selectedIndex);//顯示序號，option自己設定的

//obj.options[obj.selectedIndex].text = "我的吃吃";更改值

//obj.remove(obj.selectedIndex);刪除功能

}

</script>

</head>

<body>

</select>

</body>

</html>

根據這些東西,自己用JQEURY AJAX+JSON實作了一個小功能如下:

JS代碼:(只取了於SELECT相關的代碼)

複製代碼代碼如下:

/**

* @description 構件聯動下拉清單(用JQUERY 的AJAX配合JSON實作)

* @prarm selectId 下拉清單的ID

* @prarm method 要呼叫的方法名稱

* @prarm temp 此處存放軟體ID

* @prarm url 要跳轉的地址

function linkAgeJson(selectId,method,temp,url){

$j.ajax({

type: "get",//使用get方法存取後台

dataType: "json",//返回json格式的數據

url: url,//要存取的後台位址

data: "method=" + method+"&temp="+temp,//要傳送的數據

success: function(msg){//msg為傳回的數據，在這裡做資料綁定

var data = msg.lists;

coverJsonToHtml(selectId,data);

}

});

}

/**

* @description 將JSON資料轉換成HTML資料格式

* @prarm selectId 下拉清單的ID

* @prarm nodeArray 傳回的JSON數組

function coverJsonToHtml(selectId,nodeArray){

//get select

var tempSelect=$j("#"+selectId);

//clear select value

isClearSelect(selectId,'0');

var tempOption=null;

for(var i=0;i<nodeArray.length;i++){

//create select Option

tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');

//put Option to select

tempSelect.append(tempOption);

}

// 取得退化構件列表

getCpgjThgl(selectId,'thgjDm');

}

/**

* @description 清空下拉清單的值

* @prarm selectId 下拉清單的ID

* @prarm index 開始清空的下標位置

function isClearSelect(selectId,index){

var length=document.getElementById(selectId).options.length;

while(length!=index){

//長度是在變化的，因為必須重新取得

length=document.getElementById(selectId).options.length;

for(var i=index;i<length;i++)

document.getElementById(selectId).options.remove(i);

length=length/2;

}

/**

* @description 取得退化構件列表

* @prarm selectId1 引用軟體下拉清單的ID

* @prarm selectId2 退化構件下拉清單的ID

function getCpgjThgl(selectId1,selectId2){

var obj1=document.getElementById(selectId1);//引用軟體下拉列表

var obj2=document.getElementById(selectId2);//退化構件下拉列表

var len=obj1.options.length;

//引用軟體清單長度等於1時返回，不做操作

if(len==1){

return false;

}

//清空下拉清單的值，兩種方式都可以

// isClearSelect(selectId2,'1');

document.getElementById(selectId2).length=1;

for(var i=0;i<len; i++){

var option= obj1.options[i];

//引用軟體被選取項目不加入

if(i!=obj1.selectedIndex){

//克隆OPTION並加入到SELECT中

obj2.appendChild(option.cloneNode(true));

}

HTML程式碼:

複製代碼代碼如下:

<tr>

<td>

<input type="button"

onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="選擇...">

</td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</select>

</td>

</tr>

</TABLE>