Jquery 从MySQL中自动填充，并自动填充字段_Jquery_Mysql

Jquery 从MySQL中自动填充，并自动填充字段

jquery mysql

Jquery 从MySQL中自动填充，并自动填充字段,jquery,mysql,Jquery,Mysql,我正在从MySQL数据库检索一个项目列表，并在表单上填充一个字段。选择选项值后，阵列将自动放置在旁边的框中。对于第一个条目，这一切都很好，但问题是第二个、第三个、第四个条目等不会自动填充我不知道jQuery，一直依赖于我在这个网站上找到的例子来构建它 <?php include('../includes/main.php'); include_once('../includes/config.php'); //// Get data from database $sql = &quo

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

我不知道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>

所有输入框都使用相同的id。id是唯一的属性，您应该在每个输入上使用不同的id。将公共类添加到下拉列表中，并将事件处理程序更改为select元素的类。然后使用jquery函数更改描述和价格输入的设置。最近和。下一个和。查找，如下所示：

更改您的每个选择，如下所示：

<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>

非常感谢你抽出时间帮助我，瑞安。我做了建议的更改，现在没有一个框是自动填充的，但我仍然从数据库中得到我的选择。有什么想法吗？我有。忘记包含$document.readyfunction{var dataSource='非常感谢您的帮助。非常感谢。干杯

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

            });
        });