ajax-省市县联动

最新推荐文章于 2022-07-23 11:06:48 发布

男儿当自强biubiu

最新推荐文章于 2022-07-23 11:06:48 发布

阅读量310

点赞数

本文链接：https://blog.csdn.net/zpj890512/article/details/86686193

版权

1. 省市县联动

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/20 0020
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

</head>
<body>
    省 <select id="sheng" onchange="findShi()"></select>
    市 <select id="shi"></select>
    县 <select id="xian"></select>



    <script>
        console.log(document.getElementById("sheng"));

        function findShi () {
            // 获取省当前选中的 option 的 value
            var parentId = document.getElementById("sheng").value;
            var xhr = new XMLHttpRequest();
            xhr.onload = function () {
                var json = xhr.responseText;
                var list = JSON.parse(json);
                // 添加之前要清除下拉列表的内容
                document.getElementById("shi").innerHTML = "";
                // 添加新内容
                for(var i = 0 ; i < list.length; i++) {
                    var region = list[i];
                    // js 生成标签
                    var option = document.createElement("option"); // <option></option>
                    option.value = region.regionId; // <option value="2"></option>
                    option.innerText = region.regionName; // <option value="2">北京</option>
                    // 把它添加给 市 这个父元素
                    document.getElementById("shi").appendChild(option);
                }
            };
            xhr.open("get", "/region?parentId=" + parentId, true);
            xhr.send();
        }

        function findSheng() {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                var json = xhr.responseText();
                var list = JSON.parse(json);
                for(var i = 0 ; i < list.length; i++) {
                    var region = list[i];
                    // js 生成标签
                    var option = document.createElement("option"); // <option></option>
                    option.value = region.regionId; // <option value="2"></option>
                    option.innerText = region.regionName; // <option value="2">北京</option>
                    // 把它添加给 省 这个父元素
                    document.getElementById("sheng").appendChild(option);
                }
                // 联动
                findShi();

            };
            xhr.open("get", "/region?parentId=1", true);
            xhr.send();
        }
        findSheng();
    </script>
</body>
</html>

2. 自动完成(补全)

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/1/20 0020
  Time: 11:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        li {
            list-style: none;

        }
        li:hover {
            background: blue;
            color:white;
        }
        ul {
            display: none;
            border: 1px solid rgb(238,238,238);
            margin: 0;
            padding: 0;
            width: 160px;
            box-shadow: 0px 1px 6px rgba(0,0,0,0.2);
            border-radius: 4px ;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <input type="text" id="name" onkeyup="findByName()" onblur="hideResult()" onclick="toggleResult()">
    <ul id="result"></ul>

    <script>
        function toggleResult() {
            if(document.getElementById("result").style.display == "none") {
                document.getElementById("result").style.display = "block";
            } else {
                document.getElementById("result").style.display = "none";
            }
        }
        function hideResult() { // 14:19:00
            setTimeout(function(){
                document.getElementById("result").style.display = "none"; // 14:19:00:003
            }, 300);
        }
        function findByName() {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
                var json = xhr.responseText;
                var list = JSON.parse(json);
                document.getElementById("result").innerHTML="";
                for(let i = 0; i < list.length; i++) {
                    let li = document.createElement("li");
                    li.innerText = list[i].regionName;
                    // li 随着列表隐藏了起来
                    li.onclick = function(){
                        document.getElementById("name").value = li.innerText;
                        document.getElementById("result").style.display = "none";
                    };
                    document.getElementById("result").appendChild(li);
                }
                // i=17, li=<li>北川羌族自治县</li>
                document.getElementById("result").style.display = "block";
            };
            var v = document.getElementById("name").value;
            if( v != "" ) {
                xhr.open("get", "http://localhost:8080/regionByName?name=" + v);
                xhr.send();
            }

        }
    </script>
</body>
</html>

男儿当自强biubiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax-省市县联动

1. 省市县联动&lt;%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/1/20 0020 Time: 9:29 To change this template use File | Settings | File Templates.--%&gt;&lt;%@ page contentType="...
复制链接

扫一扫