выборка данных из localhost phpmyadmin

245

25 мая 2018, 17:20

    <td>   <select class = "list">
                               <option>Передние колодки(1 пара)замена</option>
                               <option>Суппорт передний (1)замена</option>
                               <option>Главный тормозной циллиндр замена</option>
                               <option>Вакуумный усилительтормозной системы</option>
                               <option>Регулятор тормозного усилия -замена</option>
                           </select></td>
           <td><input type="text" class="form-control price" /></td>
///
<td>   <select class = "list">
                               <option>Тормозной шланг перед/зад -замена</option>
                               <option>Рабочий цилиндр задний</option>
                               <option>тормозная жидкость замена</option>
                               <option>Шаровая опора верхняя</option>
                               <option>Регулятор тормозного усилия -замена</option>
                           </select></td>
           <td><input type="text" class="form-control price" /></td>
        </tr>

есть два селекта и база данных в localhost phpmyadmin никак не могу додуматься как сделать так, чтобы при выборе 1 из видов работ ( в option) с права появлялась его цена. Соответственно, если выбрать другой вид работ ,то выйдет уже цена выбранного option. как видите есть два selecta по 5 option. при выборе например в 1 селекте одного из вида работ то выйдет его цена , анологично и во 2. в базе данных есть id /nameofwork/ priсe. Подскажите пожалуйста.

Answer 1

Твои select и option находятся в браузере клиента. А база данных на сервере БД.

Браузер клиента не может постучаться в твою базу данных. Это может сделать только бэкэнд-приложение, написанное на php например. Ты должен из браузера послать ajax-запрос на бэкэнд, а тот в свою очередь сделать выборку из базы данных, получить цену и вернуть во фронтенд. На фронтенде ты принимаешь значение и отображаешь его в браузере где тебе нужно.

Answer 2

У каждого вида работ должен быть id. По нему достаем цену.

Информацию о ценах (workPrice) лучше подгружать сразу при генерации страницы.

const workPrice = { 
  '1': 500, 
  '2': 700, 
  '3': 1100, 
  '4': 1500, 
  '5': 2200, 
} 
 
$('.list').change(function(){ 
  const val = $(this).val(); 
  $('.price').val(workPrice[val]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr> 
    <td> 
      <select class="list"> 
        <option value="1">Передние колодки(1 пара)замена</option> 
        <option value="2">Суппорт передний (1)замена</option> 
        <option value="3">Главный тормозной циллиндр замена</option> 
        <option value="4">Вакуумный усилительтормозной системы</option> 
        <option value="5">Регулятор тормозного усилия - замена</option> 
      </select> 
    </td> 
    <td> 
      цена: <input type="text" value="500" class="form-control price" readonly/> 
    </td> 
  </tr> 
</table>