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

转载 2016年06月02日 01:33:12


今天再向大家展示一个php、jQuery、ajax的实例。呵呵~~本身这个实例没有多少技术含量,哈哈~~有技术含量的是这个车型库的数据~~嘿嘿~~想当初也采集了好长时间才搞定的呢~
经常来的朋友应该还记得《PHP判断一个请求是AJAX请求还是普通请求》这篇文章吧。
这次这个汽车车型四级联动下拉菜单的应用中就有关于判断请求来源的应用。在DEMO中会有说明。

首先来展示一下效果图:

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

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



利用php+jQuery+ajax实现汽车车型四级联动下拉选择在线实例  http://www.skygq.com/2011/01/19/利用phpjqueryajax实现汽车车型四级联动下拉菜单/

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

<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代码:

function car_type_search(select_obj,first_dom_id,second_dom_id,third_dom_id,level){
var $base_select = $(select_obj);
var position = $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){
var option_html = "";
$.each(data,function(entryIndex,entry){
if(level == 2){
option_html += "<option value='"+entry.id+"'>"+entry.first_letter + " " + entry.name+"</option>";
}else if(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类库)

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();
        }
        echo json_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();
        }
        echo json_encode($array);
        exit;
    }
}else{
    echo "哈哈~非ajax请求都被拒绝!";
}




最后附上表car_setup的数据结构


CREATE TABLE `ci_car_setup` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(80) NOT NULL,
  `father_id` int(11) NOT NULL,
  `level` int(2) NOT NULL,
  `country` tinyint(1) default '0',
  `first_letter` char(1) default NULL,
  `sort_order` int(11) NOT NULL default '0',
  PRIMARY KEY  (`id`),
  KEY `father_id` (`father_id`)
) ENGINE=MyISAM AUTO_INCREMENT=68470 DEFAULT CHARSET=utf8

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

php+vue.js 实现省市县乡的四级联动(ajax加载)

(注:需要SQL的朋友请在评论区留下email) 除了引入vue.js还需要引入vue的一个ajax库:vue-resource html: [html] view plain ...
  • php_lzr
  • php_lzr
  • 2017年06月13日 10:49
  • 692

PHP地区四级联动(thinkphp)

//设置默认,页面加载时恢复默认选项。 function region_default() { $("option[value='-1']").attr('selected','selecte...
  • jimlong
  • jimlong
  • 2013年12月01日 20:46
  • 3427

PHP和Ajax实现二级联动下拉菜单(代码、详细注释)

数据库 ..................................................................................................

jQuery+PHP+MySQL实现二级联动下拉菜单

二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现的效果就是当选择大类时,...
  • tony_Ju
  • tony_Ju
  • 2012年01月07日 15:29
  • 1701

DWR做的四级联动下拉菜单

最近做公司项目,其中要做一个

PHP+AJAX+MYSQL 仿凡客诚品省市县三级联动下拉菜单查询效果

连接数据库:db.php$dbhost="localhost";$dbpassword="123";$dbuser ='root';//数据库用户名$dbname = 'center';//数据库名$...

利用jquery、json实现前台无刷新的多级联动下拉菜单

这两天我都在做一个项目,s2sh的一个项目,里面有一个模块需要

ASP四级联动下拉菜单 (XML+Access)

  • 2013年04月11日 16:20
  • 9KB
  • 下载

jquery实现下拉菜单的二级联动,利用json对象从DB取值显示联动

利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: var mail={ //初始化 init:{ //初始化数据 ini...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用php+jQuery+ajax实现汽车车型四级联动下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)