JQuery Dynamic Combobox

Question

为什么在JQuery中，组合框添加方法似乎不像传统的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>";

我会创建自己的方法，所以我可以简单地称为例如 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);
}

对不起，如果我犯了任何错误^^ ...初级编程：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>"));
            }

        });
    });