Question

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

下拉选择输入值来自具有Product_id属性和Unit_values的Product，但我不知道如何将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>

Answer 1

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

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

Answer 2

您只需要读取所选选项的text（）属性并将其分配给输入字段的值，就像这样：

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

回声下拉值进入只读输入

2 个答案: