使用 Ajax 來變換 Select 的 Option 選單

程式碼如下:(Ajax 回傳方式為字串,以下為樣版程式碼,Javascript 部份)

//取得 id 為 select 的元素
var wo_select = document.getElementById("water_outlet"); 

//清空下拉選項
wo_select.options.length = 0;

for(var key in wo_a)
{
    //填入新的 option 選項
    wo_select.options.add(new Option(wo_a[key],wo_a[key]));
}

結果:

未選取廠商前

 

選取第一家廠商,預設的 ” 請選擇廠商 “ option 已經被清除,改為 1、2、3

 

選最第二家廠商,原本第一家廠商的選項 ” 1、2、3 “ 已經被清除,改為 1、2

 

new Option()

產生新的 Option 物件。其語法是:

新物件= new Option(, [value], [defaultSelected], [selected])

  1. text:是選項的字串。
  2. value:是選項的 value 屬性之字串。
  3. defaultSelected:設為 true 則為預設被選。內定為false。
  4. selected:設為 true 則被選擇。內定為false。