JS對select控制項option選項的增刪改查範例程式碼_javascript技巧

Javascript 操作select是表單中常見的一種,下面介紹幾種常用的JS動態操作select中的各種方法：

複製程式碼 程式碼如下:

//動態建立select
function createSelect()
{
var mySelect = document.createElement("select"); .id = "mySelect";
document.body.appendChild(mySelect);
}

複製程式碼複製程式碼

複製程式碼



複製程式碼



複製程式碼

複製碼🎜> 程式碼如下: //新增選項option function addOption()

{

//依照idid找出對象，
var obj=document .getElementById('mySelect');
//新增一個選項
obj.add(new Option("文字","值")); //這只能在IE中有效
obj. options.add(new Option("text","value")); //這個相容IE與firefox
}

複製程式碼 程式碼如下:

//刪除所有選項option
function removeAll()
{
var obj=document' mySelect');
obj.options.length=0;
}

複製程式碼複製程式碼

複製程式碼



複製碼> 程式碼如下:

//刪除一個選項option

function removeOne() { var obj=document.getElementById('mySelect'); var obj=document.getElementById('mySelect'); var// index,要刪除選項的序號，這裡取目前選取選項的序號var index=obj.selectedIndex; obj.options.remove(index);

}

複製程式碼 程式碼如下: //取得選項option的文字var obj=document. getElementById('mySelect'); var index=obj.selectedIndex; //序號，取目前選取選項的序號var val = obj.options[index].text; 複製程式碼 程式碼如下: //修改選項中 var obj=document. ('mySelect'); var index=obj.selectedIndex; //序號，取目前選取選項的序號var val = obj.options[index]=new Option("新文字","新值");