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（过滤器类型如state或city）并且基本上这个模型函数返回数据。状态淹没变化的程序如下，但具有不同的java脚本函数selectCity（state 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;
 }

如何通过在codeiginiter

1 个答案: