Question

I create select element dynamically using jquery, and I want to make action when change event occur. that is, I want to fill another select box when user choose option from the previous select box.
the code did not work because the first select box created (completely) dynamically (not just filled dynamically). I tried to make static select box and dynamically filling it and when user choose option from this combo box, I fill another combo box.this code work properly.
but in my case, I have to create the select element dynamically. I know the problem but I do not know how to fix it.
I wrote this code:

$(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
});

});

Could someone help me please?

Answer 1

Because you are creating your select element after the DOM has already loaded, you need to use a future-prove binding method such as live or delegate:

Change

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

to

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