Dynamically triggering combos for DOM creation via jQuery

Question

I have a sequence of 3 dropdowns that modify the DOM. One depends on the other. If I select the first dropdown it modifies the DOM and the other dropdown. The second dropdown modifies the third in the same way. The question is how to dynamically trigger these dropdowns? I can fill in the first.

 $('select#initial option[value=' + data[0].initial + ']').attr({ selected : "selected"}).prop('disabled', false);;

But the change event that would mount the DOM of the second dropdown was not triggered.

Answer 1

Buddy, try it this way, I created a select and in the event change, create other elements, all dynamic via DOM.

$(document).ready(function(){
$('#cboEstado')
    .append('<option>São Paulo</option>')
    .append('<option>Rio de Janeiro</option>')
    .append('<option>Minas Gerais</option>');

$('#cboEstado').on('change',function(){

    //Create a new elemment dropdown
    $('<select>')
        .prop('id','cboCidade')
        .append('<option>Araraquara</option>')
        .append('<option>Campinas</option>')
        .insertAfter($('#cboEstado'));

    //Attach event change in the new elemment
    $('#cboCidade').on('change',function(){
        $('<select>')
            .prop('id','cboItems')
            .append('<option>Item 1</option>')
            .append('<option>Item 2</option>')
            .insertAfter($('#cboCidade'));
    });
});

});

Example code in the link below: http://jsfiddle.net/rboschini/th547cnf/

(ﾟ ヮ ﾟ)