javascript选号器
时间: 2023-12-15 21:33:19 浏览: 47
以下是一个简单的JavaScript选号器的实现,它可以根据用户输入的地址信息,解析出省、市、区和详细地址,并将其显示在页面上:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript选号器</title>
<meta charset="utf-8">
<style type="text/css">
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 200px;
padding: 5px;
font-size: 16px;
}
select {
width: 200px;
padding: 5px;
font-size: 16px;
}
button {
padding: 5px 10px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<label>
<span>地址:</span>
<input type="text" id="address" placeholder="请输入地址">
</label>
<label>
<span>省:</span>
<select id="province"></select>
</label>
<label>
<span>市:</span>
<select id="city"></select>
</label>
<label>
<span>区:</span>
<select id="district"></select>
</label>
<label>
<span>详细地址:</span>
<input type="text" id="detail" readonly>
</label>
<button onclick="parseAddress()">解析地址</button>
<script type="text/javascript">
// 引用[1]中提供的解析地址工具类
function parseAddress(address) {
var province = document.getElementById("province");
var city = document.getElementById("city");
var district = document.getElementById("district");
var detail = document.getElementById("detail");
var arr = address.split(/(?=[\u4e00-\u9fa5])/);
province.value = arr[0];
city.value = arr[1];
district.value = arr[2];
detail.value = arr.slice(3).join("");
}
</script>
</body>
</html>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)