一、基礎理解：

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

e.options = new Option("文本", "值");??? //創建一個option對象，即在標簽中創建一個或多個文本。options是一個數組，里面可存放多個文本標簽。

1、options數組的屬性：

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

selectedIndex ------ 當前被選中的文本的索引值，此索引值是內存自動分配的(0,1,2,3....)對應(第一個文本值，第二個文本值，第三個文本值，第四個文本值.......)

2、單個option的屬性(即obj.options[obj.selectedIndex]是指定的某個標簽)：

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

value =====返回/指定文本，與一致

index ======返回下標

selected======返回/指定該對象是否被選中，指定true or false可動態改變選中項

defaultSelected =====返回該對象默認是否被選中，true/false

3、option的方法：

增加一個標簽======obj.options.add(new("文本", "值"))

刪除一個標簽======obj.options.remove(obj.selectedIndex);

獲取一個標簽======obj.options[obj.selectedIndex].text ;

修改一個標簽======obj.options[obj.selectedIndex] = new Option("新文本", "值") ;

刪除所有標簽======obj.options.length = 0 ;

獲取一個標簽的值====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);

}

總結

以上是生活随笔為你收集整理的java document select_javasript 操作option select的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。