Question

我使用jquery动态创建select元素，我想在更改事件发生时执行操作。也就是说，当用户从上一个选择框中选择选项时，我想填充另一个选择框。代码不起作用，因为第一个选择框（完全）动态创建（不仅仅是动态填充）。我尝试制作静态选择框并动态填充它，当用户从这个组合框中选择选项时，我填写另一个组合框。这段代码正常工作。但在我的情况下，我必须动态创建选择元素。我知道问题，但我不知道如何解决它。我写了这段代码：

$(document).ready(function(){

$("a.package").click(function(){

        var id = $(this).attr('id');
        var parameters = {"privPackage":id};
        $.getJSON("InquirerManagmentServlet", parameters, function (result){
            //alert('get param');
            var data = result[0];
            var cities = result[1];
            var semester = result[2];
            var college = result[3];

            for (var i = 0; i < data.length; i++) {
                var privNo = data[i]["privNo"];
                var privName;
                var input;
                if (privNo == 302){
                    if(college !== null && college.length){
                        input = $('<select name = "'+privNo+'" id ="collegeEName">');
                        $('>option',input).remove();
                        input.append($('<option >').val(0).text("choose .."));
                        for(var j=0; j<college.length; j++){
                            var option = $('<option />');
                            option.attr("value",college[j]["collegeNo"]);
                            option.text(college[j]["collegeEName"]);
                            input.append(option);
                         }
                    }
                } else if(privNo == 308){
                   //
                }
                $("div#InfoToValidate").append(input);
            }
        });
});

// fill second combo boxes
$("select").change(function(){
    alert("heey");
    var id = $(this).attr('id');
    if(id == "collegeEName"){
        var collegeNo = $(this).val();  // .text();
        var parameter = {
            "collegeNo":collegeNo
        };
        $.getJSON("InquirerManagmentServlet", parameter, function (departments){
            //var neighborhoods = result
            var idSecond = "departmentEName";
            $('>option',$("select#"+idSecond+"")).remove();
            $("select#"+idSecond+"").append($('<option/>').text(""));
            for(var j=0; j<departments.length; j++){
                $("select#"+idSecond+"").append($('<option value = "'+departments[j]["departmentNo"]+'"/>').text(departments[j]["departmentEName"]));
            }
        });
    }
    // the rest of code
});

}）;

有人能帮帮我吗？

Answer 1

因为您在DOM已经加载后创建了select元素，所以需要使用未来证明的绑定方法，例如live或delegate：

更改

$("select").change(function(){

到

$("select").live('change',function(){

使用jquery动态填充选择框时出现问题

1 个答案: