在任何选择选项上仅显示最后插入的记录答案

【问题标题】：On any select option display only last inserted record在任何选择选项上仅显示最后插入的记录
【发布时间】：2021-01-05 01:52:56
【问题描述】：

我有一个小问题。当用户单击任何选项时，我有一个简单的选择字段并从数据库中获取选项用户选择的不是最后一条记录。代码如下：

<div class="col-md-6 mb-3">
<label>Odaberite dimenziju produkta</label>
    <select class="select2" name="size_id[]" multiple="multiple" id="selectBox" onchange="changeFunc();">
            <?php
                $get_sizes = "select * from sizes";
                $sizes = mysqli_query($con,$get_sizes);
                while($row_size = mysqli_fetch_array($sizes)){
                $size_id = $row_size['id_size'];
                $size_name = $row_size['productSize'];
                $i++;
                echo "<option value=".$size_name.">".$size_name."</option>";
            } ?>
        </select>
    </div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<div id="textboxcont" style="display: inline-flex; width: 100%;"></div>
<script type="text/javascript">
    function changeFunc() {
        document.getElementById('textboxcont').innerHTML = '';
        var selectBox = document.getElementById("selectBox");
        var selectedValues = Array.from(document.getElementById('selectBox').selectedOptions).map(el=>el.value);
        //alert(selectedValues)
        for( var i = 0; selectedValues.length > i; ++i ) {
            var i1 = document.createElement("input");
            i1.setAttribute("type", "text");
            i1.setAttribute("name", "<?php echo $size_name; ?>");
            i1.setAttribute("id", "<?php echo $size_name; ?>");
            i1.setAttribute("placeholder", "Enter price for <?php echo $size_name; ?>");
            i1.setAttribute("class", "form-control txtt");
            // you may want to change this
            // add the file and text to the div
            document.getElementById('textboxcont').appendChild(i1);
        }
    }
    </script>
</div>

当用户单击四个可用的选定选项之一以显示具有不同名称的选定输入时，我需要。现在，当用户选择任何 1 或 2 或 3 个可用选项时，他们只显示数据库中的最后一条记录。有什么帮助吗？

【问题讨论】：

如果您不需要服务器信息，请在客户端上完成。

标签： javascript php mysql sql

【解决方案1】：

你这里有问题..

   for( var i = 0; selectedValues.length > i; ++i ) {
        var i1 = document.createElement("input");
        i1.setAttribute("type", "text");
        i1.setAttribute("name", "<?php echo $size_name; ?>");
        i1.setAttribute("id", "<?php echo $size_name; ?>");
        i1.setAttribute("placeholder", "Enter price for <?php echo $size_name; ?>");
        i1.setAttribute("class", "form-control txtt");
        // you may want to change this
        // add the file and text to the div
        document.getElementById('textboxcont').appendChild(i1);
    }

您的 $size_name 变量包含您在向选择添加选项时已经循环的查询数据数组的最后一个值。

您不应该在创建输入时使用它来设置属性。

您应该使用您在 selectedValues 中收集的值。您可以遍历它，也可以使用 selectedValues[ i ] 之类的数组索引来设置输入属性，如下所示。

function changeFunc() {
    document.getElementById('textboxcont').innerHTML = '';
    var selectBox = document.getElementById("selectBox");
    var selectedValues = Array.from(document.getElementById('selectBox').selectedOptions).map(el=>el.value);
    //alert(selectedValues[0]);
    for( var i = 0; selectedValues.length > i; ++i ) {
        var i1 = document.createElement("input");
        i1.setAttribute("type", "text");
        i1.setAttribute("name", selectedValues[i]);
        i1.setAttribute("id", selectedValues[i]);
        i1.setAttribute("placeholder", "Enter price for " + selectedValues[i] );
        i1.setAttribute("class", "form-control txtt");
        // you may want to change this
        // add the file and text to the div
        document.getElementById('textboxcont').appendChild(i1);
    }
}

【讨论】：