时间戳

首页 > 解决方案 > 自动填充字段

jquery - 自动填充字段

问题描述

我正在从 MySQL 数据库中检索项目列表并填充<select>表单上的字段。选择选项值后，数组将<input>自动放置在旁边的框中。这一切都适用于第一个，但问题是第二个、第三个、第四个条目等等，不会自动填充。

我不知道 jQuery，并且一直依赖我在这个网站上找到的示例来构建它。

<?php
include('../includes/main.php');
include_once('../includes/config.php');

//// Get data from database

$sql = "SELECT item, description, price from pricelist ";
$result = mysqli_query($con, $sql);
$dataSource = array();

while($row = mysqli_fetch_assoc($result))
{
     $dataSource[] = $row;
}

    $dataSourceInJson = json_encode($dataSource);

?>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            var dataSource = '<?php echo $dataSourceInJson; ?>';

            $( "#items").click(function() {
                var itemSelected = $(this).val();

                $.each(JSON.parse(dataSource), function( index, value ) {
                    var itemType = value.item;

                    if(itemSelected == itemType){
                        // Extract related Craft values from JSON object
                        var description = value.description;
                        var price = value.price;

                        // Place craft value in respective INPUT box
                        $('#description').val(description);
                        $('#price').val(price);
                    }

                });
            });
        });
    </script>
</head>
<body>
    <!-- First entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>

    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>
    
    
    <!-- Second entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>   
    
    
    <!-- Third entry -->
    <p><select id='items' name="items[]">
        <option value="">Select a Service</option>
        <?php
            foreach ($dataSource as $key => $value)
            {
                echo "<option value='$value[item]'>$value[item]</option>";
            }
        ?>
    </select></p>
    <p>Description:     <input type="text" id="description" name="description[]" value=""></p>
    <p>Price: <input type="text" id="price" name="price[]" value=""></p>      
    
    
</body>
</html>

标签： jquerymysql

解决方案

id您对所有input盒子都使用相同的。id是一个独特的属性，您应该id在每个输入上使用不同的 s。向下拉列表中添加一个通用类，并将事件处理程序更改为选择元素的类。.closest然后使用 jquery 函数和.nextand更改描述和价格输入的设置.find，如下所示：

像这样更改您的每个选择：

<p><select class='nameItems' name="items[]">

像这样更改每个输入：

<p>Description:<input type="text" class="description" name="description[]" value=""></p>
<p>Price: <input type="text" class="price" name="price[]" value=""></p>

然后在您的脚本中，更改为：

$( ".nameItems").click(function() {
            const itemSelected = $(this).val();
            const $selectedElement = $(this); //Store a reference to the select element

            $.each(JSON.parse(dataSource), function( index, value ) {
                var itemType = value.item;

                if(itemSelected == itemType){
                    // Extract related Craft values from JSON object
                    var description = value.description;
                    var price = value.price;

                    // Place craft value in respective INPUT box
                    $selectedElement.closest('p').next('p').find('input').val(description);
                    $selectedElement.closest('p').next('p').next('p').find('input').val(price);
                }

            });
        });

推荐阅读