Заполнение текстового поля на основе выбранного значения выпадающего значения

Question

У меня есть следующий код PHP, который выводит результат запроса (который является просто сопоставлением имени продукта и его соответствующей цены единицы) в файл JSON. Код PHP также заполняет выпадающий список.

У меня нет проблем при создании файла JSON и заполнении выпадающего списка. Моя основная проблема заключается в следующем:

Когда пользователь выбирает имя продукта из выпадающего списка, как я могу автоматически заполнить другое текстовое поле, чтобы отобразить соответствующую цену единицы товара?

<label for="p_name">Product Name</label> 
<div class="input-group"> 
    <div class="input-group-btn"> 
    <input type="text" class="form-control" name="p_name" id="p_name" style="width: 300px;" required> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" style="width: 300px;"> 
     <?php 
      $connstring = pg_connect("host=localhost dbname=myDB user=postgres password=password") 
      or die('Could not connect: ' . pg_last_error()); 
      $select = "SELECT p_name, unit_price FROM Product"; 
      $executeSelect = pg_query($select) or die('Postgresql: ' . pg_last_error()); 

      $result = array(); 

      while ($line = pg_fetch_array($executeSelect, null, PGSQL_ASSOC)) { 

       $index = 0; 
       foreach ($line as $col_value) { 
        if ($index % 2 == 0) 
        { 
         //Display Product Name in the drop down list 
         echo "<li><a>$col_value</a></li>"; 
         $index++; 
        } 
        else 
        { 
         $index++; 
        } 


       } 
       //Store query output to the result array 
       $result[] = $line; 

      } 

      //Save the query output to a JSON file 
      file_put_contents('C:\Apache\htdocs\productList.json', json_encode($result), LOCK_EX); 


      pg_free_result($executeSelect); 
      pg_close($connstring);                
     ?> 
    </ul> 
    </div><!-- /btn-group --> 
</div><!-- /input-group -->  


<label for="unit_price">Unit Price</label> 
<input type="number" class="form-control" name="unit_price" id="unit_price"></input> 

Answer 1

Используйте Javascript для показа соответствующей цены единицы товара.

JQuery для загрузки файла JSON на сервер.

$.getJSON('products.json', function(data) { 
    // process the data 
}); 

Для получения дополнительной информации о $.getJSON(), проверить this link

кончике: Лучше загрузить весь файл в формате JSON один раз в onReady() событии документа и заполнить выпадающее поле Имени продукта. Использование PHP не является хорошим выбором дизайна по моему опыту.