Как установить значение параметра списка данных во втором текстовом поле, используя html & JS (onChange ())

Question

У меня есть 1 список данных, содержащий продукты питания. Имя и второе текстовое поле для отображения цены выбранного продукта.Я не понимаю, как сделать функцию в списке данных, используя js для onChange, отображать цену в текстовом поле txtprice.

#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

Очень просто использовать 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);
}

Answer 2

На самом деле это довольно просто, вы можете настроить его так:

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