如何根据下拉选择填充文本框？

Question

我必须根据单个表中的下拉值填充我的文本框.... 这是我的桌子： TableStructure table content

在这里，当我从下拉列表中选择类别 1 时，我希望文本框值为 400（价格），对于类别 2，它应该填充 500 等等....我已经从 db 填充了下拉值，请帮助我与文本框值。

控制器：

         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

请参考jQuery change event on dropdown

或者如果您不想使用jQuery，请使用HTML标签的“onchange”属性并在JS中处理

Answer 2

查看代码

 <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);
 }