单击功能正常，但“打开更改”不适用于多重选择框

Question

Here is my code of JQuery-

$(document).ready(function(){

    //code for validation
    $("#categoryid").on("change", function() {
        var categoryid = $(this).val();
        $.ajax({
           type: "POST",
           url: "<?php echo site_url('user/order/getItem') ?>",
           data: {'categoryid': categoryid},
           cache: false,
           success: function(data)
           {
              $("#itemid").html(data);
           } 
       });
    });

    $("#itemid").on("change", function() {
        var itemid = $(this).val();

        alert(itemid);

    });
});

The first one (#categoryid) is working well. but the second one (#itemid) is not working. If i change the "change" to "click" it works but i am surprised why it is not working on "change" function.

<div class="form-group">
   <label>Select Category:</label>
       <select class="form-control" id="categoryid" autofocus>
       <?php
       $url = site_url('user/category/showCategoryJson'); // path to your JSON file
       $data = file_get_contents($url); // put the contents of the file into a variable
       $results = json_decode($data,true); // decode the JSON feed
       foreach ($results[0] as $key => $cat) { 
       ?>
           <option value="<?php echo $cat['categoryid']; ?>"><?php echo $cat['categoryname']; ?></option>
       <?php } ?>
       </select>
 </div>
 <div class="form-group">
     <label>Select Item:</label>
     <select class="form-control" id="itemid">
     </select>

 </div>

Here is my controller-

public function getItem(){
    $data = array(
        'categoryid' => $this->input->post('categoryid')
    );

    $this->load->model('user/order_model');
    $res = $this->order_model->selectItem($data);

    if($res){           
        foreach ($res as $result) {
            echo "<option value=". $result['itemid'].">".$result['itemname']."</option>";
        }
    }

}

and the output picture-

Answer 1

try this code in your success ajax call

              $.each(data,function(i,data){
                  $("#itemid").append($('<option>', {
                        value : data,                                       
                        text : data
                    }));    
             })

Answer 2

Can you try this?

jQuery(document).on('change','#itemid',function(){

})