三级联动

Posted 2020-08-27 李昊宇

以下为phpcms中的三级联动程序实现:

html代码：

 1 <!--三级联动-->
 2 <div>
 3     <form>
 4         <label>请选择收货地址:</label>
 5         <div id="p-c">
 6             <select name="province" id="province">请选择省份</select>
 7             <select name="city" id="city">请选择城市</select>
 8             <select name="region" id="region">请选择区域</select>
 9         </div>
10     </form>
11     <script src="{APP_PATH}statics/js/area.js" type="text/javascript"></script>
12     <script type="text/javascript">
13         
14         var AreaObj = new Area(‘province‘,"city","region","{APP_PATH}/api.php?op=area");
15 //        AreaObj.setApiUrl = "{APP_PATH}/api.php?op=area&id=1";
16         AreaObj.render();
17     </script>
18 </div>

 JS代码：

 1 //js原型
 2 var Area = function(province,city,region,apiurl){
 3     this.province = province;
 4     this.city = city;
 5     this.region = region;
 6     this.apiurl = apiurl;
 7 };
 8 
 9 Area.prototype.render = function(){
10     this.init();
11     console.log(this);  
12 };
13 Area.prototype.init = function(){
14     this.addOption(this.province,"请选择省份","");
15     var that = this;
16       //Ajax请求
17       $.getJSON(that.apiurl,{id:0},function(data){
18           //循环加入option
19           for(var i = 0;i < data.length; i++){
20              console.log(data[i]);
21                that.addOption(that.province,data[i][‘name‘],data[i][‘id‘]);
22           }
23       });
24       //监听省份，改变市
25       $("#" + this.province).change(function(){
26           that.delOption(that.city);
27           that.delOption(that.region);
28           that.addOption(that.city,"请选择城市","");
29           that.addOption(that.region,"请选择区域","");
30           var id = $(this).val();
31           $.getJSON(that.apiurl,{id:id},function(data){
32           //循环加入option
33           for(var i=0;i<data.length; i++){
34 //             console.log(data[i]);
35                that.addOption(that.city,data[i][‘name‘],data[i][‘id‘]);
36           }
37       });
38       });
39       //监听市改变区
40       $("#" + this.city).change(function(){
41           that.delOption(that.region);
42           that.addOption(that.region,"请选择区域","");
43           var id = $(this).val();
44           $.getJSON(that.apiurl,{id:id},function(data){
45           //循环加入option
46           for(var i = 0;i < data.length; i++){
47 //             console.log(data[i]);
48                that.addOption(that.region,data[i][‘name‘],data[i][‘id‘]);
49           }
50       });
51       });
52 };
53 Area.prototype.addOption = function(selectId,text,value){ 
54 //            根据id查找对象， 
55             var obj=document.getElementById(selectId); 
56 //            添加一个选项 
57 //            obj.add(new Option("文本","值")); //这个只能在IE中有效 
58             obj.options.add(new Option(text,value)); //这个兼容IE与firefox 
59 }; 
60 //删除option
61 Area.prototype.delOption = function(selectId){
62     var obj=document.getElementById(selectId); 
63     obj.options.length = 0 ;
64 }

 

PHP后台代码：

JSON_UNESCAPED_UNICODE    让json更懂中文

 1 <?php
 2 defined(‘IN_PHPCMS‘) or exit(‘No permission resources.‘); 
 3 //获取ID
 4 $parentid = !empty($_GET[‘id‘]) ? intval($_GET[‘id‘]) : "";
 5 if($parentid>=0){
 6     $db = pc_base::load_model(‘area_model‘);
 7     $res = $db->select([
 8         ‘parentid‘ => $parentid
 9     ]);
10     header("Content-type:application/json; charset=utf-8");
11     echo json_encode($res, JSON_UNESCAPED_UNICODE);
12 }  else {
13      exit("参数错误");
14 }
15         

 

数据哭连接：

 1 <?php
 2 defined(‘IN_PHPCMS‘) or exit(‘No permission resources.‘);
 3 pc_base::load_sys_class(‘model‘, ‘‘, 0);
 4 class area_model extends model {
 5     public $table_name = ‘‘;
 6     public function __construct() {
 7         $this->db_config = pc_base::load_config(‘database‘);
 8         $this->db_setting = ‘default‘;
 9         $this->table_name = ‘area‘;
10         parent::__construct();
11     }
12 }
13 ?>