如何从多行选择下拉框中自动填充输入文本？答案

【问题标题】：How to make autofill input text from a select dropdown box with multiple lines?如何从多行选择下拉框中自动填充输入文本？
【发布时间】：2017-01-20 14:19:14
【问题描述】：

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

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

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

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

请帮忙。

谢谢

【问题讨论】：

而不是<select id="Employee_ID" 使用<select class="Employee_ID" 然后$('.Employee_ID')。这样做
id 用于单元素事件处理，class 用于组元素事件处理
感谢@Anant 先生的快速回复！但是现在，每次我使用下拉菜单进行选择时，该值都会影响其他输入框。我只希望下拉菜单只影响与其一致的输入框

标签： javascript php json select dropdown

【解决方案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);
            }
        });
    });
})

【讨论】：

感谢@Anant 先生！还有一个，我怎样才能把价格放在姓氏字段中，而不是从选择框中输入相同的信息？
@musaspot 我在回答中为您添加了一些代码，但您必须进行相应更改，因为我不知道 getData.php 是如何工作的，也不知道您的实际 HTML 结构。
对不起 Anant 先生，这是我的 getData.php
$st = $pdo->prepare("SELECT stock_item, stock_price FROM tbl_stock WHERE id = '".$_POST['Employee_ID']."'"); $st->execute(array ('id' => $_POST['Employee_ID'])); $data = $st->fetch(PDO::FETCH_ASSOC); echo json_encode(array ('status' => true, 'name' => $data ['stock_item'], 'lastname' => $data ['stock_price'])); ?>
@musaspot 非常受欢迎。也阻止你的努力。你们这些人很棒，很难摆脱他们的问题，不像其他人在把问题放在堆栈后去睡觉。