使用CodeIgniter填充两个下拉列表;阿贾克斯

时间:2013-09-19 14:14:24

标签: php ajax codeigniter jquery

我跟着这个tutorial来填充我的两个下拉城市并且想要根据所选国家名称过滤城市名称。 我使用CodeIngniter 2.1.4和jquery-1.10.2以及数据库postgreSQL。

但我没有获得城市和国家:下拉是空的

用户控制器

<?php
class User extends CI_Controller {

        public function __construct() {
                parent::__construct();
                $this -> load -> model('country_model');

        }


        function Register() {
                $data['countries'] = $this -> country_model -> get_countries();
                $this -> load -> view('test/post_view', $data);
        }

        function get_cities($country){
      $this->load->model('city_model');
      header('Content-Type: application/x-json; charset=utf-8');
      echo(json_encode($this->city_model->get_cities($country)));
}

}
?>
<?php
class City_model extends  CI_Model {

        public function __construct() {
                $this -> load -> database();

        }

        function get_cities($country = null){
      $this->db->select('id, city_name');

      if($country != NULL){
          $this->db->where('country_id', $country);
      }

      $query = $this->db->get('cities');

      $cities = array();

      if($query->result()){
          foreach ($query->result() as $city) {
              $cities[$city->id] = $city->city_name;
          }
      return $cities;
      }else{
          return FALSE;
      }
}

}
?>

CountryModel:

<?php
class Country_model extends  CI_Model {

        public function __construct() {
                $this -> load -> database();

        }

        function get_countries() {
                $this -> db -> select('id, country_name');
                $query = $this -> db -> get('countries');

                $countries = array();

                if ($query -> result()) {
                        foreach ($query->result() as $country) {
                                $countries[$country -> id] = $country -> country_name;
                        }
                        return $countries;
                } else {
                        return FALSE;
                }
        }

}
?>

post_view.php

<html>

        <head>
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script type="text/javascript">// <![CDATA[
    $(document).ready(function(){      
        $('#country').change(function(){ //any select change on the dropdown with id country trigger this code        
            $("#cities > option").remove(); //first of all clear select items
            var country_id = $('#country').val();  // here we are taking country id of the selected one.
            $.ajax({
                type: "POST",
                url: "http://localhost/codeingiter/user/get_cities/"+country_id, //here we are calling our user controller and get_cities method with the country_id

                success: function(cities) //we're calling the response json array 'cities'
                {
                    $.each(cities,function(id,city) //here we're doing a foeach loop round each city with id as the key and city as the value
                    {
                        var opt = $('<option />'); // here we're creating a new select option with for each city
                        opt.val(id);
                        opt.text(city);
                        $('#cities').append(opt); //here we will append these new select options to a dropdown with the id 'cities'
                    });
                }

            });

        });
    });
    // ]]>
</script>
        </head>
<body>
<?php $countries['#'] = 'Please Select'; ?>

<label for="country">Country: </label><?php echo form_dropdown('country_id', $countries, '#', 'id="country"'); ?><br />
 <?php $cities['#'] = 'Please Select'; ?>
<label for="city">City: </label><?php echo form_dropdown('city_id', $cities, '#', 'id="cities"'); ?><br />
</body>
</html>

感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

此代码覆盖传递的变量值,所以改变它

  function get_cities($country = null){

将其更改为:

  function get_cities($country){

  /*your query here */

  }