PHP，Jquery，Ajax城市切换及分类切换（二级分类，三级分类）

最新推荐文章于 2022-01-20 11:43:22 发布

原创最新推荐文章于 2022-01-20 11:43:22 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

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

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

效果图如下：

分类

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);
}