利用php+jQuery+ajax实现汽车车型四级联动下拉菜单

全屏阅读
  • 基本信息
  • 作者：
  • 作者已发布：925篇文章
  • 发布时间：2016年06月03日 8:48:25
  • 所属分类：html
  • 阅读次数：2949次阅读
  • 标签：

今天再向大家展示一个php、jQuery、ajax的实例。呵呵~~本身这个实例没有多少技术含量，哈哈~~有技术含量的是这个车型库的数据~~嘿嘿~~想当初也采集了好长时间才搞定的呢~


这次这个汽车车型四级联动下拉菜单的应用中就有关于判断请求来源的应用。在DEMO中会有说明。

首先来展示一下效果图：

利用php+jQuery+ajax实现汽车车型四级联动选择

利用php+jQuery+ajax实现汽车车型四级联动选择

下面我就直接贴出代码了：不敢兴趣的就直接略过吧^_^
首先看HTML代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<labelfor="level_one">车辆类型: </label>
<selectid="level_one"name="level_one_id"onchange="car_type_search(this,'level_two','level_three','level_four','2')">
    <optionvalue="">选择车辆类型</option>
    <optionvalue="1">轿车</option>
    <optionvalue="2">商务车/MPV</option>
    <optionvalue="3">越野车/SUV</option>
    <optionvalue="4">面包车</option>
    <optionvalue="5">跑车</option>
    <optionvalue="6">皮卡</option>
    <optionvalue="7">客车</option>
    <optionvalue="8">货车</option>
</select>
<labelfor="level_two">车型品牌: </label>
<selectid="level_two"name="level_two_id"onchange="car_type_search(this,'level_three','level_four','','3')">
    <optionvalue="">选择车型品牌</option>
</select>
<labelfor="level_three">品牌车系:</label>
<selectid="level_three"name="level_three_id"onchange="car_type_search(this,'level_four','','','4')">
    <optionvalue="">选择车系</option>
</select>
<labelfor="level_three">具体车型:</label>
<selectid="level_four"name="level_four_id">
    <optionvalue="">选择车型</option>
</select>

Javascript代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
functioncar_type_search(select_obj,first_dom_id,second_dom_id,third_dom_id,level){
    var$base_select = $(select_obj);
    varposition = $base_select.offset();
    var$select1 = $("#"+first_dom_id);
    $select1.find("option:not(:first)").remove();
    if(second_dom_id !=""){
        var$select2 = $("#"+second_dom_id);
        $select2.find("option:not(:first)").remove();
    }
    if(third_dom_id !=""){
        var$select3 = $("#"+third_dom_id);
        $select3.find("option:not(:first)").remove();
    }
    if($base_select.val() !=""){
        var$tip=$('#ajax_image');
        $tip.css("display","");
        $tip.css("top",position.top).css("left",position.left);
        $.getJSON(base_url +"car_setup/car_type_search.html?id="+ $base_select.val() +"&level="+ level,function(data){
            varoption_html ="";
            $.each(data,function(entryIndex,entry){
                if(level == 2){
                    option_html +="<option value=""+entry.id+"">"+entry.first_letter +" "+ entry.name+"</option>";
                }elseif(level == 3 || level == 4){
                    option_html +="<option value=""+entry.id+"">"+entry.name+"</option>";
                }
            });
            $select1.append(option_html);
            $tip.css("display","none");
        });
    }
}

PHP代码：(注意：我用的是CI框架，在数据库调用这块是实用了CI的mysql类库)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && isset($_SERVER['HTTP_REFERER']) &&$_SERVER['HTTP_REFERER'] == site_url("car_setup")){//判断请求地址以及判断是否为ajax提交
    $id=$this->input->get('id');
    $level=$this->input->get('level');
    if($level== 2){
        $array=array();
        $array[] =array('id'=>'','name'=>'国产','first_letter'=>'');
        $level_two_guochan_list=$this->db->from("car_setup")->where("father_id",$id)->where("country",0)->order_by("first_letter ASC,name ASC")->get();
        $level_two_jinkou_list=$this->db->from("car_setup")->where("father_id",$id)->where("country",1)->order_by("first_letter ASC,name ASC")->get();
        if($level_two_guochan_list->num_rows() > 0){
            foreach($level_two_guochan_list->result()as$level_two_obj){
                $array[] =array(
                    'id'           =>$level_two_obj->id,
                    'name'         =>$level_two_obj->name,
                    'first_letter' =>$level_two_obj->first_letter
                );
            }
            $level_two_guochan_list->free_result();
        }
        $array[] =array('id'=>'','name'=>'进口','first_letter'=>'');
        if($level_two_jinkou_list->num_rows() > 0){
            foreach($level_two_jinkou_list->result()as$level_two_obj){
                $array[] =array(
                    'id'           =>$level_two_obj->id,
                    'name'         =>$level_two_obj->name,
                    'first_letter' =>$level_two_obj->first_letter,
                    'sort_order'   =>$level_two_obj->sort_order
                );
            }
            $level_two_jinkou_list->free_result();
        }
        echojson_encode($array);
        exit;
    }elseif($level== 3 ||$level== 4){
        $array=array();
        $level_three_list=$this->db->from("car_setup")->where("father_id",$id)->order_by("sort_order ASC")->get();
        if($level_three_list->num_rows() > 0){
            foreach($level_three_list->result()as$level_two_obj){
                $array[] =array(
                    'id'           =>$level_two_obj->id,
                    'name'         =>$level_two_obj->name,
                    'first_letter' =>$level_two_obj->first_letter,
                    'sort_order'   =>$level_two_obj->sort_order
                );
            }
            $level_three_list->free_result();
        }
        echojson_encode($array);
        exit;
    }
}else{
    echo"哈哈~非ajax请求都被拒绝！";
}

最后附上表car_setup的数据结构

?
1
2
3
4
5
6
7
8
9
10
11
CREATETABLE`ci_car_setup` (
  `id`int(11)NOTNULLauto_increment,
  `name`varchar(80)NOTNULL,
  `father_id`int(11)NOTNULL,
  `level`int(2)NOTNULL,
  `country` tinyint(1)default'0',
  `first_letter`char(1)defaultNULL,
  `sort_order`int(11)NOTNULLdefault'0',
  PRIMARYKEY (`id`),
  KEY`father_id` (`father_id`)
) ENGINE=MyISAM AUTO_INCREMENT=68470DEFAULTCHARSET=utf8

呵呵~现在的表里有68470条数据呢~~

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明：本文由mpxq168发布，所有内容仅代表个人观点。版权归恒富网和mpxq168共有，欢迎转载， 但未经作者同意必须保留此段声明，并给出文章连接，否则保留追究法律责任的权利! 如果本文侵犯了您的权益，请留言。

目前有 0 条留言 其中：访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言！