效果图如下:
分类
Html代码:
// +------------------------------
// | 分类
// +------------------------------
<tr>
<td align="right">分类:</td>
<td>
<select id="jq_select" name="data[select]" class="fselect">
<option value="">请选择分类</option>
<foreach name="select" item="item">
<if condition="!empty($item['v'])">
<option value="<{$item.k}>">
<{$item.v}>
</option>
</if>
</foreach>
</select>
<select id="jq_select_attr" class="fselect">
<option value="">请选择分类属性</option>
</select>
</td>
</tr>
JS代码(Jquery,Ajax)
// +-----------------
// | 分类js
// +-----------------
< script >
$(document).ready(function() {
$("#jq_select").change(function() {
//$("#jq_select_attr").empty();
//$("#selectId").find("option").not(":first").remove()
//或者
//$("#selectId").find("option:not(:first)").remove();
$("#jq_select_attr").find("option:not(:first)").remove();
$("#jq_select_attr").removeAttr("name");
//切换更改属性attr()
var select = $(this).val();
if (select != "" || undefined || null) {
var name_val = "data" + '[' + select + ']';
$("#jq_select_attr").attr("name", name_val);
$.ajax({
type: "get",
url: '<{:U("life/getSelAttr",array("cate_id"=>$cate["cate_id"]))}>',
data: {
"type": select
},
async: false,
dataType: "json",
success: function(data) {
$("#jq_select_attr").html("<option value=''>请选择分类属性</option>");
$.each(data, function(i, item) {
$("#jq_select_attr").append("<option value='" + item.attr_id + "'>" + item.attr_name + "</option>");
});
}
});
} else {
var name_val = "data" + '[' + "select" + ']';
$("#jq_select_attr").attr("name", name_val);
}
});
});
< /script>
PHP代码:
// +----------------
// |Action
// +----------------
public function getSelAttr($cate_id){
$type = I('type');
$attr = D('Lifecateattr')->getSelectAttrs($cate_id,$type);
$attr_json = json_encode($attr);
exit($attr_json);
}
// +----------------
// |Model
// +----------------
public function getSelectAttrs($cate_id, $type) {
$return = $this->where(array('cate_id' => (int)$cate_id, 'type' => $type))->select();
return $return;
}
城市切换
Html代码:
<tr>
<td align="right">所在区域:</td>
<td>
<select name="data[provinces]" id="provinces" class="fselect">
<option value="">请选择省</option>
</select>
<select name="data[citys]" id="citys" class="fselect">
<option value="">请选择市</option>
</select>
<select name="data[area_id]" id="countrys" class="fselect">
<option value="">请选择县区</option>
</select>
</td>
</tr>
JS代码:
< script >
$(document).ready(function() {
//加载所有的省份
$.ajax({
type: "get",
url: "<{:U('City/getSomeResult')}>", // type=1表示查询省份
//cache:true,
data: {
"pid": "0"
},
dataType: "json",
success: function(data) {
$("#provinces").html("<option value=''>请选择省份</option>");
$.each(data, function(i, item) {
$("#provinces").append("<option value='" + item.area_id + "'>" + item.area_name + "</option>");
});
}
});
$("#provinces").change(function() {
$("#citys").find("option:not(:first)").remove();
$("#countrys").find("option:not(:first)").remove();
if ($(this).val() != "" || undefined || null) {
$.ajax({
type: "get",
url: "<{:U('City/getSomeResult')}>", // type =2表示查询市
//cache:true,
data: {
"pid": $(this).val()
},
dataType: "json",
success: function(data) {
$("#citys").html("<option value=''>请选择市</option>");
$.each(data, function(i, item) {
$("#citys").append("<option value='" + item.area_id + "'>" + item.area_name + "</option>");
});
}
});
}
});
$("#citys").change(function() {
$("#countrys").find("option:not(:first)").remove();
if ($(this).val() != "" || undefined || null) {
$.ajax({
type: "get",
url: "<{:U('City/getSomeResult')}>", // type =2表示查询市
//cache:true,
data: {
"pid": $(this).val()
},
dataType: "json",
success: function(data) {
$("#countrys").html("<option value=''>请选择县</option>");
$.each(data, function(i, item) {
$("#countrys").append("<option value='" + item.area_id + "'>" + item.area_name + "</option>");
});
}
});
}
});
});
//市
//区/县
< /script>
PHP代码:
public function getSomeResult() {
$map['pid'] = I('pid');
$provinces = M('Area')->cache(true, 86400)->where($map)->select();
$provinces_json = json_encode($provinces);
exit($provinces_json);
}
总结:
其实分类切换和城市切换是类似的,都是jquery+ajax结合着请求php。所以理解了一个其他的也就容易了许多。从而达到举一反三的效果。