Как заполнить текстовое поле с помощью DropDownList

Question

Пожалуйста, помогите мне .. я DropDownList, который я заселена из таблицы базы данных, теперь я хочу, чтобы заполнить текстовое поле из списка базы данных ...

У меня есть одна таблица

ID | сок | рупии

теперь, когда я выбираю сок манго из колонки сока из DropDownList он должен показать стоимость сока манго в текстовом поле, извлекая из рупии колонки

здесь является DropDownList, который заполняется из таблицы

<select name="drink" id="drinkid"> 
<option id="0">-- Select the drink --</option> 
<?php 
require("dbcon.php"); 
$getalldrinks = mysql_query("SELECT * FROM tableone"); 
while($viewalldrinks = mysql_fetch_array($getalldrinks)){ 
?> 
<option id="<?php echo $viewalldrinks['id']; ?>"><?php echo $viewalldrinks['juice'] ?></option> 
<?php 
} 
?> 
</select> 

и вот текстовое поле

<input type="text" name="juicename" id="juiceid" placeholder="Juice"> 

Пожалуйста, помогите мне .. спасибо заранее.

Answer 1

1. Сначала добавьте onChange() события в select теге вызвать функцию fillTextBox() каждый время изменить параметр, то функция будет заполнить textbox:

   <select name="drink" id="drinkid" onChange="fillTextBox()"> 
   

2. Теперь у вас есть т о получить рупии столбец & хранить его в каждой опции, используя data атрибут:

   <option data-rupees="<?php echo $viewalldrinks['rupees']; ?>" id="<?php echo $viewalldrinks['id']; ?>" ><?php echo $viewalldrinks['juice'] ?></option> 
   

3. Создать функцию fillTextBox(), которая заполнит textbox по rupees значение выбранного параметра:

   function fillTextBox(){ 
       var myselect = document.getElementById("drinkid"); 
       var rupees = myselect.options[myselect.selectedIndex].getAttribute("data-rupees"); 
   
       document.getElementById("juiceid").value = rupees; 
   } 
   

Это должно сделайте работу, надеюсь, что это поможет.

Answer 2

Вам нужно будет использовать javascript для обнаружения изменений в вашем поле выбора, сохранения этих значений и заполнения нужного значения в текстовом поле. Вы не указали текстовое поле в своем html, поэтому я должен предположить, что я могу получить доступ к этому значению с помощью ввода [type = text]. Ниже приведен пример того, как должен выглядеть ваш javascript, учитывая, что я работаю с неполной информацией. Обратите внимание, что в вашем случае, вероятно, должен быть атрибут с именем value для хранения вашего идентификатора вместо использования атрибута id.

var el = document.getElementById('drinkId'); 
el.addEventListener("click", function(){ 
    var data = {"id": el.value, "text": el.innerHTML}; 
    document.querySelectorAll('input[type=text]')[0].value = data.text; 
}); 

Вам нужно будет предоставить более подробную информацию и узнать больше о вашем коде, если вы хотите получить точное решение вашей проблемы.

UPDATE: Я вижу, вы добавили HTML текстового поля, так вот обновленная версия обработчика событий:

var el = document.getElementById('drinkId'); 
el.addEventListener("click", function(){ 
    var data = {"id": el.value, "text": el.innerHTML}; 
    document.getElementById('juiceId').value = data.text; 
});