Jquery: Automatically update group of select boxes created by append on change the first select

Question

I'm using .append() to create new lines inside a form composed by select boxes that are updated based on the value of the first one.

The purpose is to create as many lines (groups of select boxes) as needed and by changing the value of the first select box they update the others in the line.

I managed to do this with the following code:

HTML:

        <div class="input_fields_wrap">
        <table>
            <tr>
                <td class="span1">Select_1: </td>
                <td class="span1">Select_2: </td>
                <td class="span1">Select_3: </td>
                <td class="span1">Select_4: </td>
            </tr>
            <tr>
                <td>
                    <select class="span2" id='Select_1' name='Select_1[]'>
                        <option value="0">Seleccione...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <select class="span2" id='Select_2' name='Select_2[]'>
                        <option value="0">Seleccione...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <select class="span2" id='Select_3' name='Select_3[]'>
                        <option value="0">Seleccione...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
                <td>
                    <select class="span2" id='Select_4' name='Select_4[]'>
                        <option value="0">Seleccione...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </td>
            </tr>
        </table>
        </div>

JQUERY:

    <script type="text/javascript">
        $('#Select_1').change(function(){
            $('#Select_2').load("file.php?ID1=" + $(this).val());
            $('#Select_3').load("file.php?ID2=" + $(this).val());
            $('#Select_4').load("file.php?ID3=" + $(this).val());
        });

        var max_fields = 20;
        var x = 1;
        var wrapper = $(".input_fields_wrap");
        var add_button = $(".add_field_button");

        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                var html   = '<div class="input_fields_wrap">';
                    html   = html + '<select class="span2" id="Select_1" name="Select_1[]"><option value="0">Seleccione...</option><?php foreach($var1 as $row1){echo '<option value="'.$row1['ID'].'">'.$row1['Name'].'</option>';}?></select>';
                    html   = html + '<select class="span2" id="Select_2" name="Select_2[]"><option value="0">Seleccione...</option><?php foreach($var2 as $row2){echo '<option value="'.$row2['ID'].'">'.$row2['Name'].'</option>';}?></select>';
                    html   = html + '<select class="span2" id="Select_3" name="Select_3[]"><option value="0">Seleccione...</option><?php foreach($var3 as $row3){echo '<option value="'.$row3['ID'].'">'.$row3['Name'].'</option>';}?></select>';
                    html   = html + '<select class="span2" id="Select_4" name="Select_4[]"><option value="0">Seleccione...</option><?php foreach($var4 as $row4){echo '<option value="'.$row4['ID'].'">'.$row4['Name'].'</option>';}?></select>';
                    html   = html + '<button onclick="#" class="remove_field">Remove</button></div>';
                $(wrapper).append(html);
            }
        });

        $(wrapper).on("click",".remove_field", function(e){
            e.preventDefault(); 
            $(this).parent('div').remove(); 
            x--;
        });
    </script>

This all works ok for the first line.

All the others that are created by the .append() in Jquery aren´t updated when the select box "Select_1" value is changed.

I need that all the lines created by append have the funcionality to update the 3 select boxes by change the first select box value.

I'm using JQuery 2.1.4

Thanks in advance.

score 0 · Accepted Answer · edited May 23 '17 at 12:30

Just found the problem. It was a noob question after all.

Just have to:

Call the autocomplete function again to resolve the combobox problem;
Rename the comboboxes in the append code with a autoincrement number to contemplate each line;
Run the update comboboxes code after the append with the new comboboxes name;

Here's the code to put right after the append command:

$(wrapper).append(html);

$("#Select"+x).combobox({
    select: function (event, ui){
        $('#Select'+x).load("file.php?ID1=" + $(this).val());
        $('#Select'+x).load("file.php?ID2=" + $(this).val());
        $('#Select'+x).load("file.php?ID3=" + $(this).val());
    }
});

The solution was found with some help found here: jQuery append elements not working with autocomplete

Thanks for all!

Jquery: Automatically update group of select boxes created by append on change the first select

1 Answers1