jQuery ajax 实现下拉框二级联动

最新推荐文章于 2022-05-16 22:36:31 发布

远山之远

最新推荐文章于 2022-05-16 22:36:31 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/heijinkuiba/article/details/73205041

本文演示了如何利用jQuery AJAX实现下拉框的二级联动效果。当用户在一级下拉框中选择省份时，通过AJAX异步请求获取对应的二级城市数据，并动态填充到二级下拉框中。

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

首先默认显示一级下拉框内容我这边是tp5 的模板

1.Ajax的异步到后台读取和一级下拉框对应的数据然后 return json 数据

2.json 数据前台用eval 函数转换成对象

3. 用循环把要的数据通过jQuery 追加到二级下拉框里面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加文章</title>
<link rel="stylesheet" type="text/css" href="/static/homeback/css/adminlist.css" />
<meta name="description" content="Dashboard">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>
<body>
选择文章分类：

<select id="province">
<option>请选择</option>
{volist name="data" id="vo"}
<option value ="{$vo.id}">{$vo.navName}</option>
{/volist}
</select>
<select id="city">
    <option>请选择</option>
</select>
<script type="text/javascript" src="/static/homeback/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    /*
     * 需要思考哪些事情?
     * * 在什么时候执行Ajax的异步请求?
     *   * 当用户选择具体的省份信息时
     */
    // 1. 为id为province元素绑定onchange事件
    var provinceEle = document.getElementById("province");
    provinceEle.onchange = function(){
        // 清空
        var city = document.getElementById("city");
        var opts = city.getElementsByTagName("option");
        for(var z=opts.length-1;z>0;z--){
            city.removeChild(opts[z]);
        }

        if(provinceEle.value != "请选择"){
            // 2. 执行Ajax异步请求
            var xhr = getXhr();
            xhr.open("post","{:url('article/test')}");
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("province="+provinceEle.value);
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){
                    // 接收服务器端的数据内容
                    var obj;
                    var data = xhr.responseText;
                    var obj = eval(data);//成功以后调用eval方法将数组还原成js数组对象
                    for( var i = 0;i<obj.length;i++){
                       $("#city").append('<option value="' + obj[i]['id'] + '">' + obj[i]['navName'] + '</option>');
                       //$("#city").html("<option value='"+data[i][areaid]+"'>"+data[i][areaname]+"</option>")
                       alert(obj[i]['navName']);
                    }
                    //var cities = data;
                    // data是字符串,转换为数组
                    //var cities = data.split(",");
                    //for(var i=0;i<cities.length;i++){
                    //    var option = document.createElement("option");
                    //    var textNode = document.createTextNode(cities[i]);
                    //    option.appendChild(textNode);
                    //    city.appendChild(option);
                    //}
                }
            }
        }

    };
    // 定义获取ajax核心对象的函数XMLHttpRequest对象的函数
    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHttp");
        }
        return xhr;
    }
</script>
</body>
</html>