动态选择选项和来自PHP的动态数据

Question

I tried develop add several selectbox dynamically and get data from selectbox my codes:

this codes add new selectbox and work

var y = 1;
var z = 1;

$('#add_kind').on('click', function () {

            var html = '';
            html += '<div class="prInput-row">';
            html += '<select name="kind_id" class="halfselect kinds">';
            html += '<option value="0">Kinds</option>';
            html += '<?php foreach($kinds as $kind): ?>';
            html += '<option value="<?php echo $kind->id;?>"><?php echo $kind->name;?></option>';
            html += '<?php endforeach; ?>';
            html += '</select>';
            html += '<select name="kind_desc_id" class="halfselect kind_descriptions">';
            html += '<option value="0">Kind Descriptions/option>';
            html += '</select>';
            html += '<input type="text" name="stock_piece" class="halfselect" placeholder="Stock Piece"/>';
            html += '</div>';

            $('#kind_area').append(html);

            $('.kinds').each(function () {
                $(this).attr('class', 'halfselect kinds_'+y);
                y++;
            });

            $('.kind_descriptions').each(function () {
                $(this).attr('class', 'halfselect kind_descriptions_'+z);
                z++;
            });

        });


        $('.kinds').each(function () {
            $(this).attr('class','halfselect kinds_'+y);
            y++;
        });
        $('.kind_descriptions').each(function () {
            $(this).attr('class','halfselect kind_descriptions_'+z);
            z++;
        });

this codes get data from db and not work,

var i = 1;

    $(".kinds_"+i).on('change', function() {
        var kindID = $(this).val();
        if(kindID) {
            $.ajax({
                type: "POST",
                url: baseUrl+"products/getSelectedKind",
                data: 'kind_id='+kindID,
                success: function(data) {
                    $('.kind_descriptions_'+i).html(data);
                }
            });
        } else {
            $('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
        }

        i++;
    });

how can change those codes and how can get dynamically datas

this picture my example

Answer 1

you can get all element that have class started with "kinds_" with selector $("[class^=kinds_]") then do a loop to get your class index. So maybe something like this will work:

$.each($("[class^='kinds_']"), function() {
    var selector = "."+$(this).attr("class");
    $(document).on('change', selector, function() {
        var kindID = $(this).val();
        var i = $(this).attr("class").substr(-1, 1);
        if(kindID) {
            $.ajax({
                type: "POST",
                url: baseUrl+"products/getSelectedKind",
                data: 'kind_id='+kindID,
                success: function(data) {
                    $('.kind_descriptions_'+i).html(data);
                }
            });
        } else {
            $('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
        }
    });
})

Answer 2

@anon, I solved thank you so much but 2 times write codes but how can write one time ?

$("#add_kind").click(function(){
        $.each($("[class*='kinds_']"), function() {
            $(this).on('change', function() {
                var kindID = $(this).val();
                var i = $(this).attr("class").substr(-1, 1);
                if(kindID) {
                    $.ajax({
                        type: "POST",
                        url: baseUrl+"products/getSelectedKind",
                        data: 'kind_id='+kindID,
                        success: function(data) {
                            $('.kind_descriptions_'+i).html(data);
                        }
                    });
                } else {
                    $('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
                }
            });
        });
    });

    $.each($("[class*='kinds_']"), function() {
        $(this).on('change', function() {
            var kindID = $(this).val();
            var i = $(this).attr("class").substr(-1, 1);
            if(kindID) {
                $.ajax({
                    type: "POST",
                    url: baseUrl+"products/getSelectedKind",
                    data: 'kind_id='+kindID,
                    success: function(data) {
                        $('.kind_descriptions_'+i).html(data);
                    }
                });
            } else {
                $('.kind_descriptions_'+i).html('<option value="0">Kind Descriptions</option>');
            }
        });
    });