Question

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

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

<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中进行选择时，商品价格将反映在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);
            }
        })
    });
})

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

请帮忙。

由于

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

注意： - 将此代码放入单独的文件并运行。那么你就可以理解你要做什么，然后相应地改变你的代码。谢谢。

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

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

如何从具有多行的选择下拉框中创建自动填充输入文本？

1 个答案: