如何填充城市下拉选择国家下拉列表中的值从mysql数据库codeiginiter

Question

我试了很多找到解决方案，如何通过选择第一个下拉列表中选择国家城市下拉菜单，但我不明白可用的解决方案。我已经填充了数据库的第一个下拉列表，但由于对Ajax没有认识，我无法填充第二个下拉列表。请提供完整的代码ajax或jquery如何通过选择第一个谢谢来填充第二个。

查看

<div class="form-group"> 
    <label for="" class="col-md-4 control-label">City</label> 
    <div class="col-md-8 text center"> 
     <select class="form-control" name="city" id="city"> 
     <?php foreach($cityData as $data){ 

        $id = $data->city_id; 
        $country_name =$data->city_name; 
       ?> 

      <option value="<?php echo $id; ?>"><?php echo $city_name; ?></option> 

      <?php } ?> 
     </select> 

    </div> 
</div> 

<div class="form-group"> 
    <label for="" class="col-md-4 control-label">Country</label> 
    <div class="col-md-8 text center"> 
     <select class="form-control" class="country" name="country"> 
      <option value="">Select Country</option> 
      <?php foreach($countryData as $data){ 

        $id = $data->country_id; 
        $country_name =$data->country_name; 
       ?> 

      <option value="<?php echo $id; ?>"><?php echo $country_name; ?></option> 

       <?php } ?> 
     </select>           
    </div> 
</div> 

Ajax代码

<script>  
$(document).ready(function(){ 
    $("select.country").change(function(){ 
     var selectedCountry = $(".country option:selected").val(); 
     $.ajax({ 
      type: "POST", 
      url: "../form_controller/populate_cities", 
      data: { country : selectedCountry } 
     });.done(function(data){ 
      $("#city").html(data); 
     }); 
    }); 
}); 
</script> 

控制器来填充城市

public function populate_cities(){ 
    $this->load->model('cities'); 

    $country_id = $this->input->post('country'); 


    $data['cityData'] = $this->cities->getData($country_id); 
    $this->load->view('reservation_detail'); 

} 

Answer 1

注：我假设你的国家和城市，状态表

如何这段代码的工作： -当网页加载，当时控制器指数函数被调用，并触发一个模型函数getCountry（）这个函数检索所有可用的国家名称并通过此查看。当国家下拉值改变时，它称为ajax函数selectState（当前国家/地区id），并将此ajax函数称为控制器loadData（），并将此函数称为模型函数loadData（过滤器类型类似于州或城市），并且基于此模型函数返回数据。状态淹没更改但具有不同的Java脚本函数selectCity（状态ID）函数的相同过程遵循之前的流程。 java脚本函数调用loadData js函数来加载数据。

Java脚本代码： -

function selectState(country_id){ 
    if(country_id!="-1"){ 
    loadData('state',country_id); 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
    }else{ 
    $("#state_dropdown").html("<option value='-1'>Select state</option>"); 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
    } 
} 

function selectCity(state_id){ 
    if(state_id!="-1"){ 
    loadData('city',state_id); 
    }else{ 
    $("#city_dropdown").html("<option value='-1'>Select city</option>"); 
    } 
} 

function loadData(loadType,loadId){ 
    var dataString = 'loadType='+ loadType +'&loadId='+ loadId; 
    $("#"+loadType+"_loader").show(); 
    $("#"+loadType+"_loader").fadeIn(400).html('Please wait... <img src="image/loading.gif" />'); 
    $.ajax({ 
    type: "POST", 
    url: "loadData", 
    data: dataString, 
    cache: false, 
    success: function(result){ 
     $("#"+loadType+"_loader").hide(); 
     $("#"+loadType+"_dropdown").html("<option value='-1'>Select "+loadType+"</option>"); 
     $("#"+loadType+"_dropdown").append(result); 
    } 
}); 
} 

控制器功能： -

public function index() 
{ 
    $this->load->model('model'); 
    $result['list']=$this->model->getCountry(); 
    $this->load->view('top'); 
    $this->load->view('index',$result); 
    $this->load->view('footer'); 
} 

public function loadData() 
{ 
    $loadType=$_POST['loadType']; 
    $loadId=$_POST['loadId']; 

    $this->load->model('model'); 
    $result=$this->model->getData($loadType,$loadId); 
    $HTML=""; 

    if($result->num_rows() > 0){ 
    foreach($result->result() as $list){ 
     $HTML.="<option value='".$list->id."'>".$list->name."</option>"; 
    } 
    } 
    echo $HTML; 
} 

型号功能： -

function getCountry() 
{ 
    $this->db->select('id,country_name'); 
    $this->db->from('country'); 
    $this->db->order_by('country_name', 'asc'); 
    $query=$this->db->get(); 
    return $query; 
} 

function getData($loadType,$loadId) 
{ 
    if($loadType=="state"){ 
    $fieldList='id,state_name as name'; 
    $table='state'; 
    $fieldName='country_id'; 
    $orderByField='state_name'; 
    }else{ 
    $fieldList='id,city_name as name'; 
    $table='city'; 
    $fieldName='state_id'; 
    $orderByField='city_name'; 
    } 
    $this->db->select($fieldList); 
    $this->db->from($table); 
    $this->db->where($fieldName, $loadId); 
    $this->db->order_by($orderByField, 'asc'); 
    $query=$this->db->get(); 
    return $query; 
}