PHP,Jquery,Ajax城市切换及分类切换(二级分类,三级分类)

本文详细介绍了如何使用jQuery、Ajax与PHP结合实现分类与城市切换的功能,通过实例展示了HTML、JS与PHP代码实现过程,并总结了两者相似性与举一反三的学习方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图如下:

172540_8zMk_2519486.png

分类

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。所以理解了一个其他的也就容易了许多。从而达到举一反三的效果。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值