用户
 找回密码
 入住 CI 中国社区
搜索
查看: 3217|回复: 5
收起左侧

[AJAX] CI省市县Jquery无刷新,整理lcnphp兄的代码

[复制链接]
发表于 2013-3-26 11:35:35 | 显示全部楼层 |阅读模式
首先本人引用的是http://codeigniter.org.cn/forums/forum.php?mod=viewthread&tid=5236这个贴子中的代码,但是这个贴子中的代码直接是运行不起来的,经过两天查找问题后,终于搞定.
首先region_change.php中select_children函数返回的json_encode是不支持中文的,所以这个函数有必要改造一下
那么我现在把所有代码贴出来,如下
1、控制器中region_change.php
<?php
class Region_change extends CI_Controller {//CI中类名首字母大写
    function __construct() {
        parent::__construct();
           }   
function select_children()
{
   function ch_json_encode($data) {
     function ch_urlencode($data) {
         if (is_array($data) || is_object($data)) {
             foreach ($data as $k => $v) {
                 if (is_scalar($v)) {
                     if (is_array($data)) {
                         $data[$k] = urlencode($v);
                     } else if (is_object($data)) {
                         $data->$k = urlencode($v);
                     }
                 } else if (is_array($data)) {
                     $data[$k] = ch_urlencode($v); //递归调用该函数
                 } else if (is_object($data)) {
                     $data->$k = ch_urlencode($v);
                 }
             }
         }
         return $data;
     }
     
     $ret = ch_urlencode($data);
     $ret = json_encode($ret);
     return urldecode($ret);
  }
             $segments = $this->uri->uri_to_assoc();         
             $this->load->model('region_model');
             $data['children']   = $this->region_model->children_of($segments['parent_id']);      
             echo ch_json_encode($data['children']);  //返回json格式的数据
}
}//原文中直接用的json_encode返回的不支持中文。

2、模型中region_model.php
<?php
class Region_Model extends CI_Model
{
function __construct()
{
  parent::__construct();
  $this->load->database();
}
function provinces()
     {
         //调用children_of(1)函数,并将parent_id=1;这样的话,就取出了所有parent_id为1的值,即所有的省份            
        return $this->children_of(1);
     }
     function children_of($parent_id, $select="*")
     {      
         
         $parent_id = (int)$parent_id;
         //echo $parent_id;
         $regions = array();
         $this->db->select($select);
        
         $this->db->where('parent_id', $parent_id);
         //从region表中由parent_id选取所有的子集
         if ($query = $this->db->get('ps_region')){
             $res=$query->result_array();
            // print_r($res);
           // var_dump($res);
           // exit;
             return $query->result_array();  //返回一个关联数组
   }
   return array();      
    }
}
?>
3、视图中district_select.php
<?php
$CI = get_instance();
$CI->load->model('region_model', 'region');
$provinces   = $CI->region->provinces();
$citys = $CI->region->children_of($province_selected);
?>
<script  language="JavaScript">
<!--
<?php if(isset($province_selected)):?>
var province_selected = <?php echo (int)$province_selected?>;
<?php else:?>
var province_selected = 0;
<?php endif?>
<?php if(isset($city_selected)):?>
var city_selected = <?php echo (int)$city_selected?>;
<?php else:?>
var city_selected = 0;
<?php endif?>
<?php if(isset($district_selected)):?>
var district_selected = <?php echo (int)$district_selected?>;
<?php else:?>
var district_selected = 0;
<?php endif?>
$(document).ready(function() {
  var change_city = function(){
$.ajax({
   url: '<?php echo site_url('region_change/select_children/parent_id')?>'+'/'+$('#province_id').val(),
   type: 'GET',
   dataType: 'html',
   success: function(data){
  city_json = eval('('+data+')');
  var city = document.getElementById('city_id');
  city.options.length = 0;
  city.options[0] = new Option('请选择', -1);
  for(var i=1; i<city_json.length+1; i++){
            var len = city.length;
   city.options = new Option(city_json[i-1].region_name, city_json[i-1].region_id);
   //if (city.options.value == city_selected){
   // city.options.selected = true;
   //}//如需要默认选择的时候就需要加上这段
  }
  change_district();//重置地区
   }
});
  }
  change_city();//初始化城市
  $('#province_id').change(function(){
     change_city();
  });
  var change_district = function(){
$.ajax({
   url: '<?php echo site_url('region_change/select_children/parent_id')?>'+'/'+$('#city_id').val(),
   type: 'GET',
   dataType: 'html',
   success: function(data){
        district_json = eval('('+data+')');
  var district = document.getElementById('district_id');
  district.options.length = 0;
  district.options[0] = new Option('请选择', -1);
  for(var i=1; i<district_json.length+1; i++){
         //   var len = district.length;
   district.options = new Option(district_json[i-1].region_name, district_json[i-1].region_id);
  // if (district.options[len].value == district_selected){
  //  district.options[len].selected = true;
  //}//如需要默认选择的时候就需要加上这段
  }
   }
});
  }
  change_district();//初始化县区
  $('#city_id').change(function(){
     change_district();
  });
});
//-->
</script>
<select name="province_id" id="province_id"  style="width:100px;">
<?php foreach($provinces as $key => $province): ?>
<option value="<?php echo $province['region_id']; ?>"  ><?php echo $province['region_name']; ?></option>
<?php endforeach; ?>
</select>
<select name="city_id" id="city_id"  style="width:100px;">
    <?php foreach($citys as $key => $city): ?>
<option value="<?php echo $city['region_id']; ?>"  ><?php echo $city['region_name']; ?></option>
<?php endforeach; ?>
</select>
<select name="district_id" id="district_id" style="width:100px;">
    <option value=""></option>
</select>
4、控制器中引用页我就随便用welcome.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
      public function __construct()
     {
         parent::__construct();
         $this->load->helper(array('form','url'));                 
     }   
     
public function index()
{
  header("Content-type:text/html;charset=Utf-8");
  $data['province_selected']=6;
  $data['city_selectd'] =76;
  $data['district_selected'] =693;
  $this->load->view('welcome_message',$data);
}
}
5、视图中的引用页我就用的是welcome_message.php
<html>
<head>
<meta charset="utf-8">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>
<body>
<?php
  $data['province_selected']=$province_selected;
  $data['city_selectd'] =$city_selectd;
  $data['district_selected'] =$district_selected;  
  $this->load->view('widget/district_select',$data);
?>

</body>
</html>
好了,至此代码已全部贴完了,如果还有什么问题QQ:38829979我

发表于 2013-3-26 18:44:42 | 显示全部楼层
谢谢兄弟!
发表于 2013-3-27 11:54:42 | 显示全部楼层
好多好繁琐
发表于 2013-4-5 13:31:13 | 显示全部楼层
能不能把代码用编译器里面的code框起来,至少让别人看起来舒服一点
发表于 2013-12-26 17:49:46 | 显示全部楼层
首先本人引用的是http://codeigniter.org.cn/forums/forum.php?mod=viewthread&tid=5236这个贴子中的代码,但是这个贴子中的代码直接是运行不起来的,经过两天查找问题后,终于搞定.
首先region_change.php中select_children函数返回的json_encode是不支持中文的,所以这个函数有必要改造一下
那么我现在把所有代码贴出来,如下
1、控制器中region_change.php
  1. &lt;?php
  2. class Region_change extends CI_Controller {//CI中类名首字母大写
  3.     function __construct() {
  4.         parent::__construct();
  5.            }   
  6. function select_children()
  7. {
  8.    function ch_json_encode($data) {
  9.      function ch_urlencode($data) {
  10.          if (is_array($data) || is_object($data)) {
  11.              foreach ($data as $k =&gt; $v) {
  12.                  if (is_scalar($v)) {
  13.                      if (is_array($data)) {
  14.                          $data[$k] = urlencode($v);
  15.                      } else if (is_object($data)) {
  16.                          $data-&gt;$k = urlencode($v);
  17.                      }
  18.                  } else if (is_array($data)) {
  19.                      $data[$k] = ch_urlencode($v); //递归调用该函数
  20.                  } else if (is_object($data)) {
  21.                      $data-&gt;$k = ch_urlencode($v);
  22.                  }
  23.              }
  24.          }
  25.          return $data;
  26.      }
  27.      
  28.      $ret = ch_urlencode($data);
  29.      $ret = json_encode($ret);
  30.      return urldecode($ret);
  31.   }
  32.              $segments = $this-&gt;uri-&gt;uri_to_assoc();         
  33.              $this-&gt;load-&gt;model('region_model');
  34.              $data['children']   = $this-&gt;region_model-&gt;children_of($segments['parent_id']);      
  35.              echo ch_json_encode($data['children']);  //返回json格式的数据
  36. }
  37. }//原文中直接用的json_encode返回的不支持中文。
复制代码


2、模型中region_model.php
  1. &lt;?php
  2. class Region_Model extends CI_Model
  3. {
  4. function __construct()
  5. {
  6.   parent::__construct();
  7.   $this-&gt;load-&gt;database();
  8. }
  9. function provinces()
  10.      {
  11.          //调用children_of(1)函数,并将parent_id=1;这样的话,就取出了所有parent_id为1的值,即所有的省份            
  12.         return $this-&gt;children_of(1);
  13.      }
  14.      function children_of($parent_id, $select=&quot;*&quot;)
  15.      {      
  16.          
  17.          $parent_id = (int)$parent_id;
  18.          //echo $parent_id;
  19.          $regions = array();
  20.          $this-&gt;db-&gt;select($select);
  21.         
  22.          $this-&gt;db-&gt;where('parent_id', $parent_id);
  23.          //从region表中由parent_id选取所有的子集
  24.          if ($query = $this-&gt;db-&gt;get('ps_region')){
  25.              $res=$query-&gt;result_array();
  26.             // print_r($res);
  27.            // var_dump($res);
  28.            // exit;
  29.              return $query-&gt;result_array();  //返回一个关联数组
  30.    }
  31.    return array();      
  32.     }
  33. }
  34. ?&gt;
复制代码

3、视图中district_select.php
  1. &lt;?php
  2. $CI = get_instance();
  3. $CI-&gt;load-&gt;model('region_model', 'region');
  4. $provinces   = $CI-&gt;region-&gt;provinces();
  5. $citys = $CI-&gt;region-&gt;children_of($province_selected);
  6. ?&gt;
  7. &lt;script  language=&quot;JavaScript&quot;&gt;
  8. &lt;!--
  9. &lt;?php if(isset($province_selected)):?&gt;
  10. var province_selected = &lt;?php echo (int)$province_selected?&gt;;
  11. &lt;?php else:?&gt;
  12. var province_selected = 0;
  13. &lt;?php endif?&gt;
  14. &lt;?php if(isset($city_selected)):?&gt;
  15. var city_selected = &lt;?php echo (int)$city_selected?&gt;;
  16. &lt;?php else:?&gt;
  17. var city_selected = 0;
  18. &lt;?php endif?&gt;
  19. &lt;?php if(isset($district_selected)):?&gt;
  20. var district_selected = &lt;?php echo (int)$district_selected?&gt;;
  21. &lt;?php else:?&gt;
  22. var district_selected = 0;
  23. &lt;?php endif?&gt;
  24. $(document).ready(function() {
  25.   var change_city = function(){
  26. $.ajax({
  27.    url: '&lt;?php echo site_url('region_change/select_children/parent_id')?&gt;'+'/'+$('#province_id').val(),
  28.    type: 'GET',
  29.    dataType: 'html',
  30.    success: function(data){
  31.   city_json = eval('('+data+')');
  32.   var city = document.getElementById('city_id');
  33.   city.options.length = 0;
  34.   city.options[0] = new Option('请选择', -1);
  35.   for(var i=1; i&lt;city_json.length+1; i++){
  36.             var len = city.length;
  37.    city.options = new Option(city_json[i-1].region_name, city_json[i-1].region_id);
  38.    //if (city.options.value == city_selected){
  39.    // city.options.selected = true;
  40.    //}//如需要默认选择的时候就需要加上这段
  41.   }
  42.   change_district();//重置地区
  43.    }
  44. });
  45.   }
  46.   change_city();//初始化城市
  47.   $('#province_id').change(function(){
  48.      change_city();
  49.   });
  50.   var change_district = function(){
  51. $.ajax({
  52.    url: '&lt;?php echo site_url('region_change/select_children/parent_id')?&gt;'+'/'+$('#city_id').val(),
  53.    type: 'GET',
  54.    dataType: 'html',
  55.    success: function(data){
  56.         district_json = eval('('+data+')');
  57.   var district = document.getElementById('district_id');
  58.   district.options.length = 0;
  59.   district.options[0] = new Option('请选择', -1);
  60.   for(var i=1; i&lt;district_json.length+1; i++){
  61.          //   var len = district.length;
  62.    district.options = new Option(district_json[i-1].region_name, district_json[i-1].region_id);
  63.   // if (district.options[len].value == district_selected){
  64.   //  district.options[len].selected = true;
  65.   //}//如需要默认选择的时候就需要加上这段
  66.   }
  67.    }
  68. });
  69.   }
  70.   change_district();//初始化县区
  71.   $('#city_id').change(function(){
  72.      change_district();
  73.   });
  74. });
  75. //--&gt;
  76. &lt;/script&gt;
  77. &lt;select name=&quot;province_id&quot; id=&quot;province_id&quot;  style=&quot;width:100px;&quot;&gt;
  78. &lt;?php foreach($provinces as $key =&gt; $province): ?&gt;
  79. &lt;option value=&quot;&lt;?php echo $province['region_id']; ?&gt;&quot;  &gt;&lt;?php echo $province['region_name']; ?&gt;&lt;/option&gt;
  80. &lt;?php endforeach; ?&gt;
  81. &lt;/select&gt;
  82. &lt;select name=&quot;city_id&quot; id=&quot;city_id&quot;  style=&quot;width:100px;&quot;&gt;
  83.     &lt;?php foreach($citys as $key =&gt; $city): ?&gt;
  84. &lt;option value=&quot;&lt;?php echo $city['region_id']; ?&gt;&quot;  &gt;&lt;?php echo $city['region_name']; ?&gt;&lt;/option&gt;
  85. &lt;?php endforeach; ?&gt;
  86. &lt;/select&gt;
  87. &lt;select name=&quot;district_id&quot; id=&quot;district_id&quot; style=&quot;width:100px;&quot;&gt;
  88.     &lt;option value=&quot;&quot;&gt;&lt;/option&gt;
  89. &lt;/select&gt;
复制代码

4、控制器中引用页我就随便用welcome.php
  1. &lt;?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
  2. class Welcome extends CI_Controller {
  3.       public function __construct()
  4.      {
  5.          parent::__construct();
  6.          $this-&gt;load-&gt;helper(array('form','url'));                 
  7.      }   
  8.      
  9. public function index()
  10. {
  11.   header(&quot;Content-type:text/html;charset=Utf-8&quot;);
  12.   $data['province_selected']=6;
  13.   $data['city_selectd'] =76;
  14.   $data['district_selected'] =693;
  15.   $this-&gt;load-&gt;view('welcome_message',$data);
  16. }
  17. }
  18. 5、视图中的引用页我就用的是welcome_message.php
  19. &lt;html&gt;
  20. &lt;head&gt;
  21. &lt;meta charset=&quot;utf-8&quot;&gt;
  22.   &lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&quot;&gt;&lt;/script&gt;

  23. &lt;/head&gt;
  24. &lt;body&gt;
  25. &lt;?php
  26.   $data['province_selected']=$province_selected;
  27.   $data['city_selectd'] =$city_selectd;
  28.   $data['district_selected'] =$district_selected;  
  29.   $this-&gt;load-&gt;view('widget/district_select',$data);
  30. ?&gt;

  31. &lt;/body&gt;
  32. &lt;/html&gt;
复制代码

发表于 2013-12-27 14:06:01 | 显示全部楼层

本版积分规则