在制作链式下拉列表时遇到滚动链接的问题

Question

I'm facing scroll-linked trouble while making chained dropdown.

I'm using php as programming language and codeigniter as the framework, here are the codes

View Codes

     <div class="form-row">
       <div class="col-md-4">
         <label for="inputBody">Body Number</label>
         <select name="inputBody" id="inputBody" class="form-control" required="required">
            <?php foreach ($body as $bd) { ?>
              <option value="<?php echo $bd->bodynumkids ?>" onchange="ambildata('+<?php echo $bd->bodynumkids ?>+');"><?php echo $bd->bodynumkids ?></option>
            <?php } ?>
          </select>
        </div>
        <div class="col-md-6">
           <label for="inputKiddie">Kiddies Name</label>
           <input type="text" name="inputKiddie" id="inputKiddie" class="form-control" placeholder="ex. Super Cop" required="required">
        </div>
        <script type="text/javascript">
           function ambildata(x) {
             $.ajax({
                type:'POST',
                data :'input='+x,
                url :'<?php echo base_url()."Repairpaint/chained" ?>',
                dataType: 'json',
                success: function(data){
                   console.log(data);
                }
               })
              }
          </script>
       </div>

Controller Codes

public function chained()
    {
        $dataKiddie = $this->input->post('input');
        $where = array('bodynumkids'=> $dataKiddie);
        $namakiddie = $this->Model_repairpaint->chaincb('kiddiejadi', $where)->result();
        echo json_encode($namakiddie);
    }

The result wasn't appear in console, only these warning that appear

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

What expected is the data from database appear in console when I click the dropdown. Can anyone here tell me the solution? Thank you before, for helping me.

Answer 1

Put ambildata()function in <select> tag not in <option>

<select name="inputBody" id="inputBody" class="form-control" required="required" onchange="ambildata(this.value)">

And the second thing some changing in the Ajax call

url : '<?php echo base_url("Repairpaint/chained"); ?>'

OR

url : '<?php echo base_url(); ?>' + 'Repairpaint/chained';

Sending Data

data : { 'input': x }