ajax-省市县联动

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.value = region.regionId; // 
                    option.innerText = region.regionName; // 
                    // 把它添加给 市 这个父元素
                    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.value = region.regionId; // 
                    option.innerText = region.regionName; // 
                    // 把它添加给 省 这个父元素
                    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=
  • 北川羌族自治县
  • 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>

    你可能感兴趣的:(ajax-省市县联动)