如何从多行的 select 下拉框中制作自动填充输入文本？

Question

我正在尝试一个功能，用户可以从下拉框中 select 他们想要的项目，然后价格将显示在旁边的输入框中。

我现在面临在多行中具有相同功能的问题。代码如下：

<td class="formiterate" >                                               
    <select id="Employee_ID" name="id[]">
        <option value="">Select one</option>
        <?php
        $st = $pdo->prepare("SELECT * FROM tbl_stock");
        $st->execute();
        $rowes = $st->fetchAll(PDO::FETCH_ASSOC);
        foreach ($rowes as $rowe) {
            ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
        }
    ?>
    </select>
</td>
<td class="formiterate"><input type="text" name="Last_name[]" id="Last_name"></td>

如您所见，当您从 Employee_ID select 时，商品价格将反映在 Last_name[] 输入框中。

虽然代码对单行工作正常，但我无法为多行迭代函数。

下面是我的javascript:

$(function() { // This code will be executed when DOM is ready
    $('#Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
        var $row = $(this); // We create an jQuery object with the select inside
        $.post("getData.php", { Employee_ID : $row.val()}, function(json) {
            if (json && json.status) {
                $('#Last_name').val(json.lastname);
            }
        })
    });
})

我尝试在 var ($row)= $this 添加 .closest(".rows")，但没有注意到。

请帮忙。

谢谢

Answer 1

给你的一个例子（硬代码例子）：-

abc.php:-

<?php
error_reporting(E_ALL); //check all type of errors
ini_set('display_errors',1);
$rowes = array(0=>array('id'=>1,'stock_item'=>'item1','stock_brand'=>'demo1'),1=>array('id'=>2,'stock_item'=>'item2','stock_brand'=>'demo2'),2=>array('id'=>3,'stock_item'=>'item3','stock_brand'=>'demo3'));
?>
<html>
<body>
<table>
<tr style= "float:left;width:100%">
<td class="formiterate" >                                               
    <select class="Employee_ID" name="id[]">
        <option value="">Select one</option>
        <?php
        foreach ($rowes as $rowe) {
            ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
        }
    ?>
    </select>
</td>
<td class="formiterate"><input type="text" name="Last_name[]" class="Last_name"></td>
</tr>
<tr style= "float:left;width:100%">
    <td class="formiterate" >                                               
        <select class="Employee_ID" name="id[]">
            <option value="">Select one</option>
            <?php
            foreach ($rowes as $rowe) {
                ?><option value="<?= $rowe ['id']; ?>"><?= $rowe ['stock_item']; ?> (<?= $rowe ['stock_brand']; ?>)</option><?php
            }
        ?>
        </select>
    </td>

<td class="formiterate"><input type="text" name="Last_name[]" class="Last_name"></td>
</tr>
</table>
</body>
<script src = "https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$(function() { // This code will be executed when DOM is ready
    $('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
        var data =  $(this).children(':selected').text();
        console.log(data);
        $(this).parent().next().find('.Last_name').val(data);
    });
})
</script>
</html>

我这边的输出（从下拉列表中选择后）：- http://prntscr.com/chernw

注意：- 将这段代码放到一个单独的文件中并运行。然后你就可以明白你必须做什么，然后改变你的代码 accordingly.thanks.

在你的情况下尝试这样：-

$(function() { // This code will be executed when DOM is ready
    $('.Employee_ID').change(function() { // When the value for the Employee_ID element change, this will be triggered
        var currentseletbox = $(this);
        var data =  $(this).children(':selected').text();
        $.post("getData.php", { Employee_ID : $row.val()}, function(json) {
            if (json && json.status) {
                currentseletbox.parent().next().find('.Last_name').val(json.lastname);
            }
        });
    });
})

如何从多行的 select 下拉框中制作自动填充输入文本？

How to make autofill input text from a select dropdown box with multiple lines?

javascript

php

select

json

dropdown