如何填充城市下拉選擇國家下拉列表中的值從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; 
}