Как заполнить текстовое поле на основе выпадающего списка?

Question

Я должен заполнить свое текстовое поле на основе раскрывающегося значения из одной таблицы .... Вот моя таблица: TableStructure содержимое таблицы

Здесь, когдая выбираю категорию 1 из выпадающего списка, я хочу, чтобы значение текстового поля было 400 (цена), а для категории 2 оно должно заполняться 500 и т. д. Я уже заполнил раскрывающееся значение из базы данных, пожалуйста, помогите мне со значением текстового поля.

Контроллер:

         public function viewcatprice()
            {
               $this->load->model('JcMeetingExpense_model');
               $data['query1'] = $this->JcMeetingExpense_model->viewcatprice();   
               $this->load- 
                        >view('JcMeetingExpense/jc_meeting_expense',$data);
            }

Модель:

          function viewcatprice()
           {
             $query = $this->db->select('*')->from('jc_price_master')->get();
             return $query->result();
           }

Вид:

     <label for="catprice"></label>
     <select class="form-control" name="category">
        <?php   
        foreach($query1 as $row)
        { 
          echo '<option value="'.$row->category.'">'.$row- 
          >category.'</option>';
        }
        ?>
        </select>
         <tr>
         <td class="colone">Amount Per Head:</td>
         <td class="coltwo"></td>
         <td class="colthree"><input type="number" name="num5"  id="num5" 
         class="input-field" name="field1" style="width:35%;" />
         </td>
         </tr>

Answer 1

Просмотр кода

 <select class="form-control" name="category" id='cat_id'>
    <?php   
    foreach($query1 as $row)
    { 
      echo '<option value="'.$row->category.'">'.$row- 
      >category.'</option>';
    }
    ?>
    </select>

jQuery(document).ready(function($) {
 $("#cat_id").on('change', function() {
    var cat_id = $(this).val();

    if(cat_id){
           $.ajax ({
            type: 'POST',
            url: 'php_file_that_select_price_from_category_id.php',
            data: { cat_id: cat_id },
            success : function(response) {
                var response = $.parseJSON(response);
                $('#num5').val(response.jc_price_master); 

            },error:function(e){
            alert("error");}
        });
     }
  });
});

Код контроллера для ajax

 public function ajax_price_list() 
 { 
   $this->load->helper('url'); 
   $this->load->model('JcMeetingExpense_model'); 
   $data['jc_price_master'] = $this->JcMeetingExpense_model->getprice(); 
   //$this->load->view('JcMeetingExpense/jc_meeting_expense',$data); you do not have to load view here
   echo jason_encode($data);
 }

Answer 2

Пожалуйста, смотрите Событие изменения jQuery при раскрытии

или, если вы предпочитаете не использовать jQuery, используйте атрибут «onchange» тега HTML и обрабатывайте его в JS