将下拉值回显为只读输入答案

【问题标题】：Echo Dropdown Value into readonly input将下拉值回显为只读输入
【发布时间】：2019-04-18 23:27:55
【问题描述】：

美好的一天！我在获取下拉选择输入的值并将值回显到只读输入而不重新加载 Web 浏览器时遇到问题。

下拉选择输入值来自具有 Product_id 属性和 Unit_values 的产品，但我不知道如何将 Unit_values 值放入 Product_id 下拉选择中（如果选择）。

    <div class="form-group">
        <label class="col-md-2 control-label">Product</label>
            <div class="col-md-8">
                <select class="form-control form-control-lg input-lg" id="inputSmall" name="product" required >
                        option readonly  hidden value="">-- Select a Product --</option>
                            <?php while($row1 = $product->fetch_object()):  ?>
                            <option value="<?php echo $row1->Product_ID; ?>">
                            <?php echo $row1->Product_Description ?></option>
                            <?php endwhile ?>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2" for="email">Unit Value:</label>
                <div class="col-md-8">
                    <div class="input-group input-group-lg">
                        <input type="text" readonly placeholder="Unit Value" id="qty" 
name="quantity" class="form-control" value="<?php  ?>"><span class="input-group-addon">.00</span>
                    </div>
                </div>
            </div>

【问题讨论】：

您的 JavaScript 代码在哪里？你试过什么了？你遇到了什么错误？

标签： php jquery

【解决方案1】：

您只需要读取所选选项的 text() 属性并将其分配给输入字段的值，如下所示：

$('#inputSmall').on('change', function(){
    let unitVal = $(this).find("option:selected").text();
    $('#qty').val(unitVal);
});

【讨论】：

【解决方案2】：

为此，您需要使用 AJAX（通常使用 jQuery）来查看数据库。但我想最好的解决方案是创建已设置 Unit_values 的选项，例如使用数据属性。

<select class="form-control form-control-lg input-lg" id="inputSmall" name="product" required >
                    option readonly  hidden value="">-- Select a Product --</option>
                        <?php while($row1 = $product->fetch_object()):  ?>
                        <option data-unit-values="<?php echo $row1->Unit_values; ?>" value="<?php echo $row1->Product_ID; ?>">
                        <?php echo $row1->Product_Description ?></option>
                        <?php endwhile ?>
                </select>

如果您这样做，那只是使用 jQuery 获取数据值。

$("select").data("unit-values");

【讨论】：