Problem in filling select box dynamically using jquery

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?

SeanCannon · Accepted Answer · 2011-07-18 23:18:01Z

3

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(){

answered Jul 18, 2011 at 23:18

SeanCannon

78.1k17 gold badges126 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem in filling select box dynamically using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related