标王 热搜: mysql  jquery  种子  爬岩鱼  有机肥  投资  新农人  跳跳鱼  天麻  农资 
当前位置: 首页 » 农人博客 » 农人学电脑 » 正文

汽车车型四级联动php+jQuery+ajax实现

更多
放大字体  缩小字体 发布日期:2015-05-21  来源:梦三秋博客  浏览次数:110
 首先看HTML代码:
 
<label for="level_one">车辆类型: </label>
<selec id="level_one" name="level_one_id""car_type_search(this,'level_two','level_three','level_four','2')">
<option value="">选择车辆类型</option>
<option value="1">轿车</option>
<option value="2">商务车/MPV</option>
<option value="3">越野车/SUV</option>
<option value="4">面包车</option>
<option value="5">跑车</option>
<option value="6">皮卡</option>
<option value="7">客车</option>
<option value="8">货车</option>
</select>
php汽车四联动
 
<label for="level_two">车型品牌: </label>
<selec id="level_two" name="level_two_id""car_type_search(this,'level_three','level_four','','3')">
<option value="">选择车型品牌</option>
</select>
 
<label for="level_three">品牌车系:</label>
<selec id="level_three" name="level_three_id""car_type_search(this,'level_four','','','4')">
<option value="">选择车系</option>
</select>
 
<label for="level_three">具体车型:</label>
<selec id="level_four" name="level_four_id">
<option value="">选择车型</option>
</select>
Javascript代码:
 
function car_type_search(select_obj,first_dom_id,second_dom_id,third_dom_id,level){
    var $base_selec = $(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")->wher("father_id",$id)->wher("country",0)->order_by("first_letter ASC,name ASC")->get();
        $level_two_jinkou_list = $this->db->from("car_setup")->wher("father_id",$id)->wher("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")->wher("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` varcha(80) NOT NULL,
  `father_id` int(11) NOT NULL,
  `level` int(2) NOT NULL,
  `country` tinyint(1) default '0',
  `first_letter` cha(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
免责声明:本站部分文章系转载自网络,如有侵犯,请联系我们立即删除。另:本文仅代表作者个人观点,与新农业农资网无关。如无特殊注明均为本站(新农业农资网)原创,版权归新农业农资网所有,如需转载请注明来源地址.
 
[ 农人博客搜索 ]  [ ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]  [ 返回顶部 ]

 
 
专业农业类网站建设 手机APP开发 小程序开发
热门话题
推荐图文
 
新农业网
新农业网
新农业网