動態選擇選項和來自PHP的動態數據

Question

我嘗試開發動態添加幾個選擇框並從我的代碼的選擇框中獲取數據：

此代碼添加新的選擇框並工作

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++;
        });

該代碼從db獲取數據，但不起作用，

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++;
    });

如何更改這些代碼以及如何動態獲取數據

這幅畫我的例子

Answer 1

您可以使用選擇器$("[class^=kinds_]")獲得所有以“ kinds_”開頭的類的元素，然后執行循環以獲取您的類索引。 所以也許這樣的事情會起作用：

$.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，我解決了非常感謝，但是2次寫代碼，但是一次怎么寫？

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