<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>
<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