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>")); 
      } 

     }); 
    });