JavaScript動態建立select下拉選單

下面就分部介紹一下如何動態的建立操作一個select下拉選單:

一.建立一個select:

[JavaScript] 純文字檢視 複製程式碼
function createSelect(){
  mySelect=document.createElement("select");
  mySelect.id="mySelect";
  document.body.mydiv.appendChild(mySelect);
}

以上程式碼可以建立一個select物件，並且將此select的id設定為"mySelect"。

二.為select新增option項:

[JavaScript] 純文字檢視 複製程式碼
function addOption(){
var obj=document.getElementById('mySelect');
obj.add(new Option("顯示的內容一","值"));//只有IE瀏覽器支援
obj.options.add(new Option("顯示的內容二","值"));//相容所有瀏覽器
}

函式Option(text,value,defaultselected,selected)函式具有四個引數:

1.text引數:規定option專案顯示的文字。

2.value引數:規定option專案的值。

3.defaultselected引數:布林值用來規定當前項是否是預設選中項。

4.selected引數:布林值用來規定當前項是否被選中。

三.刪除所有的option:

[JavaScript] 純文字檢視 複製程式碼
function removeAll(){  
  var obj=document.getElementById('mySelect');  
  obj.options.length=0;  
}

將select物件的option項的個數設定為0即可。

四.刪除一個指定的option項:

[JavaScript] 純文字檢視 複製程式碼
function removeOne(){  
  var obj=document.getElementById('mySelect');    
  obj.options.remove(index);  
}

將obj.options.remove()函式的引數設定為要刪除項的索引即可。

五.獲取相應專案的值:

[JavaScript] 純文字檢視 複製程式碼
function getValue(){
  var obj=document.getElementById('mySelect');  
  var val=obj.options[index].value;  
}

使用options[index].value即可獲得options集合中相應索引項的值。

六:獲取相應專案的文字:

[JavaScript] 純文字檢視 複製程式碼
function getText(){
  var obj=document.getElementById('mySelect');  
  var val=obj.options[index].text;  
}

使用options[index].text即可獲得options集合中相應索引項的值。

七:修改執行索引選項:

[JavaScript] 純文字檢視 複製程式碼
function updateOption(){
  var obj=document.getElementById('mySelect');  
  var val=obj.options[index]=new Option("新文字","新值");  
}

為指定索引值的option項賦值。