Question

HTML和PHP

<?php for($i=0;$i<2;$i++) { ?>
<select id="name_<?php echo $i;?>">
    <option value="John">John</option>
    <option value="Alice">Alice</option>
</select>

<input type="text" id="name-id_<?php echo $i;?>">
<input type="text" id="location_<?php echo $i;?>">

<?php } ?>

JS

for (var i = 0; i < 2; i++) 
{
    $('select#name_'+i).on('change',function()  
    {
        name = $('select#name_'+i).val();
        if($.trim(name) !='')
        {
            $.post('ajax/name.php',{name:name},function(data)
            {
                $('input#name-id_'+i).val(data);
            });

            $.post('ajax/location.php',{name:name},function(data)
            {
                $('input#location_'+i).val(data);
            });
        }
    });
}

ajax / name.php和ajax / location.php是从DB检索数据的文件。我想要的输出是数据将根据我选择的下拉菜单数据显示在名称和位置列中。

Answer 1

这是使用closure variable in a loop的经典问题，闭包变量i在所有更改处理程序之间共享，因此在循环结束时i的值为{所有更改处理程序将为2，不匹配任何元素

在这种情况下，一种解决方案是使用IIFE为每个循环迭代创建一个局部闭包

for (var i = 0; i < 2; i++) {
    (function (idx) {
        $('select#name_' + idx).on('change', function () {
            name = $(this).val();
            if ($.trim(name) != '') {
                $.post('ajax/name.php', {
                    name: name
                }, function (data) {
                    $('input#name-id_' + idx).val(data);
                });

                $.post('ajax/location.php', {
                    name: name
                }, function (data) {
                    $('input#location_' + idx).val(data);
                });

            }
        });

    })(i)
}

在这种情况下，另一种可能的解决方案可能是使用事件数据

for (var i = 0; i < 2; i++) {
    $('select#name_' + i).on('change', {
        index: i
    }, function (e) {
        name = $(this).val();
        if ($.trim(name) != '') {
            $.post('ajax/name.php', {
                name: name
            }, function (data) {
                $('input#name-id_' + e.data.index).val(data);
            });

            $.post('ajax/location.php', {
                name: name
            }, function (data) {
                $('input#location_' + e.data.index).val(data);
            });

        }
    });
}

根据下拉菜单ID显示数据

1 个答案: