JQuery的動態組合框

Question

爲什麼內的JQuery，組合框add方法似乎並沒有被承認爲與傳統的HTML組合框的位置：

http://viralpatel.net/blogs/demo/dynamic-combobox-listbox-dropdown-in-javascript.html

Answer 1

要獲得jQuery的實際DOM元素上調用DOM方法，use .get()：

$("#myDropDown").get(0).add(option); 

請注意，雖然，還有另一種方式jQuery來做到這一點：

$('#myDropDown').append($('<option></option>').val(myVal).html(optionText)); 

還有Select Box plugin如果你正在做更多的選擇。

Answer 2

function MyFunction(myOption) 
{ 
    $("#cbx").attr("innerHTML",myOption); 
} 

myOption應該是這個樣子：

var myOption = "<option>" + whatever you want + "</option>"; 

我會ussually創建自己的方法，所以我可以簡單地調用e.g AddDoc（DOC）;
即使$("#myDropDown").get(0).add(option);對我來說感覺太久了。
我做了一些像InsertOption(cbx,Option);
這只是一種替代方式^^。

function InsertOption(cbx,option) 
{ 
    $("#"+cbx).attr("innerHTML",option); 
} 

function AppendOption(cbx,option) 
{ 
    var opt = $("#"+cbx).attr("innerHTML"); 
    opt += option; 
    $("#"+cbx).attr("innerHTML",opt); 
} 

很抱歉，如果我犯任何錯誤^^ ...初中PROG ERE：d

Answer 3

如果假設我們有2個組合框

1. 狀態
2. 城市

當你選擇狀態組合框，然後根據該值將它添加到城市組合框中：

$(document).ready(function() { 

     $("#DropDownList1").change(function() { 

      if ($("#DropDownList1 option:selected").text() == "Please Select") { 
       $("select[id$=DropDownList2] > option").remove(); 
      } 

      if ($("#DropDownList1 option:selected").text() == "Andhra Pradesh") { 
       $("select[id$=DropDownList2] > option").remove(); 
       $("#DropDownList2").append($("<option>" + ("Hyderabad") + "</option>")); 
       $("#DropDownList2").append($("<option>" + ("Vijayawada") + "</option>")); 
       $("#DropDownList2").append($("<option>" + ("Karimnagar") + "</option>")); 
      } 
      if ($("#DropDownList1 option:selected").text() == "Tamilnadu") { 
       $("select[id$=DropDownList2] > option").remove(); 
       $("#DropDownList2").append($("<option>" + ("Madhurai") + "</option>")); 
       $("#DropDownList2").append($("<option>" + ("Chennai") + "</option>")); 
      } 
      if ($("#DropDownList1 option:selected").text() == "Karnataka") { 
       $("select[id$=DropDownList2] > option").remove(); 
       $("#DropDownList2").append($("<option>" + ("Bangalore") + "</option>")); 
      } 

     }); 
    });