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

how can change those codes and how can get dynamically datas

这张照片是我的例子

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

动态选择选项和来自PHP

2 个答案: