Editable select box do not get refresh on ajax call in Codeigniter

Question

I am using editable select to show drop down list.Depend on search if values is not present in table which initially generates dropdown then I check if values are present in other table and if yes then I want to reload drop down with new values. Select in view is

<select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
    <option value=""></option>
    <?php if(!empty($port_list))
          {
            foreach($port_list as $d)
            {
    ?>
    <option value="<?php echo $d->port_id; ?>"><?php echo $d->port_name; ?></option>
    <?php  } } ?>
</select>

and ajax is

var search_val = $("#port_of_loading").val();   
$.ajax({
  type:'POST',
  cache:false,
  async:false,
  data: { 'search_val' : search_val },
  url: 'URL',
  success: function(data)
  { 
      $("#port_of_loading").html(data);

  }
});

I am refreshing it from controller. consloe.log(data) output is

            <select tabindex="2" id="port_of_loading" name="port_of_loading" onkeyup="port_search()">
                <option value=""></option>
                <option value="26">value1</option>
                <option value="9">value2</option>
            </select>