javasript 操作option select一些常用方法

一、基礎理解：

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.selectedIndex]是指定的某個<option>標籤)：

text ===== 返回/指定文本

value =====返回/指定文本，與<option value="...">一致

index ======返回下標

selected======返回/指定該對象是否被選中，指定true or 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 ;

注意：

obj.option中的option不需要大寫

new Option中的option需要大寫

1 檢測是否有選中
if(objSelect.selectedIndex > -1) {
//說明選中
} else {
//說明沒有選中
}

 

2.動態創建select

function createSelect(){

var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

 

3.添加選項option

function addOption(){

//根據id查找對象，
var obj=document.getElementById('mySelect');

//添加一個選項
obj.add(new Option("文本","值"));
}

 

4.刪除所有選項option

function removeAll(){
var obj=document.getElementById('mySelect');

obj.options.length=0;

}

 

5.刪除一個選項option

function removeOne(){
var obj=document.getElementById('mySelect');

//index,要刪除選項的序號，這裏取當前選中選項的序號

var index=obj.selectedIndex;
obj.options.remove(index);
}

 

6.獲得選項option的值

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

var index=obj.selectedIndex; //序號，取當前選中選項的序號

var val = obj.options[index].value;

 

7.獲得選項option的文本

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

var index=obj.selectedIndex; //序號，取當前選中選項的序號

var val = obj.options[index].text;

 

8.修改選項option

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

var index=obj.selectedIndex; //序號，取當前選中選項的序號

var val = obj.options[index]=new Option("新文本","新值");

 

9.刪除select

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}