選擇下拉菜單時如何自動填充文本框

Question

我正在嘗試在選擇下拉列表時自動填充文本框。 我已經嘗試了一些代碼，但是沒有任何反應，我已經在代碼中包含了jquery文件。

我有一個稱為服務的數據庫表，列為service_id，service_name，service_price。

這是我的觀點

   <div class="form-group-inner">
   <div class="row">
   <div class="col-lg-1">
   <label class="login2 pull-right pull-right-pro">Service</label>
   </div>
   <div class="col-lg-4">
   <div class="form-select-list">
   <select class="form-control custom-select-value" id="service_name" name="service_name">
   <option>Select Service</option>
   <?php foreach ($service as $services): ?>
   <option value="<?php echo $services->service_id; ?>"><?php echo $services->service_name; ?></option>
   <?php endforeach; ?>
   </select>
   </div>
   </div>
   </div>
   </div>

   <div class="form-group-inner">
   <div class="row">
   <div class="col-lg-1">
   <label class="login2 pull-right pull-right-pro">Price</label>
   </div>
   <div class="col-lg-4">
   <input type="text" id="price" name="price" class="form-control"  />
   </div>
   </div>
   </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () { 
    $('#service_name').on('change', function() {
    var service_id=$("service_name").val();
    $.post("<?php echo base_url();?>/records/getprice/" + service_id,

    function(data){
    $('#price').val(data.service_price);
    });
}
<script>

控制者

    function add_form($patient_id){
        $data['service']=$this->services_model->get_all_services();
        $data['value'] = $this->patient_model->get_selected_patient($patient_id);
        $this->load->view('header/header');
        $this->load->view('Records/add_records',$data);
        $this->load->view('footer/footer');
    }

    function getprice($service_id){

        $laiza=$this->db->get_where("services",array("service_id"=>$service_id));
        foreach ($laiza->result() as $row){
            $arr = array('service_price' => $row->service_price);
            header('Content-Type: application/json');
            echo json_encode($arr);
        }

    }

我希望當我從下拉列表中選擇數據時，文本框將根據所選項目的下拉列表填充價格

Answer 1

獲取Service_Name值時，缺少ID選擇器＃

更改為

var service_id = $（“＃service_name”）。val（）;

要么

var service_id = this.value;

<script>
$(document).ready(function () { 
    $('#service_name').on('change', function() {
    var service_id=$("#service_name").val();
    $.post("<?php echo base_url();?>/records/getprice/" + service_id,

    function(data){
    $('#price').val(data.service_price);
    });
}
<script>