Question

我有1个数据列表，其中包含食品名称和第二个文本框，用于显示所选食品的价格。我不了解如何使用js在datalist上创建函数，以在文本框txtprice中onChange显示价格。

#I'm using codeigniter  


<input list="browsers" id="browser" name="browser">
                <datalist id="browsers" onchange="getComboA(this)">
                    <?php foreach($h as $row){ ?>
                        <option value="<?php echo $row->price;?>" >                         
                            <?php echo $row->menu_name;?>
                        </option>
                    <?php } ?>
                </datalist>

<div class="col-12 col-md-2"><input type="text" placeholder="Price"  class="form-control" id="txtPrice" name="txtPrice" value="<?php echo $row->price;?>" readonly >
</div>

例如：商品名称-Panner Tikka |价格-150

Answer 1

实际上很容易，您可以这样设置：

<input list="browsers" id="browser" name="browser" onchange="setTxtPrice(this)">
<datalist id="browsers">
    <?php foreach($h as $row){ ?>
        <option value="<?php echo $row->price;?>" >                         
            <?php echo $row->menu_name;?>
        </option>
    <?php } ?>
</datalist>

<div class="col-12 col-md-2">
    <input type="text" placeholder="Price"  class="form-control" id="txtPrice" name="txtPrice" value="<?php echo $row->price;?>" readonly >
</div>

<script type="text/javascript">
function setTxtPrice(input1) {
    var input2 = document.getElementById('txtPrice');
    input2.value = input1.value;
}
</script>

Answer 2

在onchange()中使用JS很容易

当选项更改时，使用this.value来获取datalist的值

<datalist id="browsers" onchange="PutValue(this.value)">
<?php foreach($h as $row){ ?>
    <option value="<?php echo $row->price;?>" >                         
        <?php echo $row->menu_name;?>
    </option>
<?php } ?>

JS

function PutValue(Value){
    $('#input_field_id').val(Value);
}

如何使用html和JS（onChange（））在第二个文本框中设置数据列表选项值

2 个答案: