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 () {
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];
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];
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() {
setTimeout(function(){
document.getElementById("result").style.display = "none";
}, 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.onclick = function(){
document.getElementById("name").value = li.innerText;
document.getElementById("result").style.display = "none";
};
document.getElementById("result").appendChild(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>