使用JavaScript中变量（数组或对象）定义省份及对应的城市，应用Select标签对象，实现二级级联的 下拉菜单选中效果。也就是说，在省份下拉菜单中，选中一个省份时，在城市下拉菜单中出现对应城市选择内容。效果如下：
代码如下：
<!DOCTYPE html>
<html><head><meat charset="utf-8"></meat><title>JavaScript省份城市的三级联动</title></head><body><h2>选择所在的省份及城市<br/><br/>
省份：<select id="province"><option value="-1">请选择</option></select>
城市 <select id="city"></select>
</h2><script>// 省份数组let provinceArr = ["北京","上海", "山东省", "甘肃省", "江苏", "河北"];//城市数组let cityArr = [["北京市"],["上海市"],["济南市", "青岛市", "烟台市"],["兰州", "白银", "天水","武威","金昌"],["苏州市", "南京市", "扬州市"],["石家庄", "秦皇岛", "张家口"],];//给下拉菜单添加选项function createOption(select, arr){for (let inder in arr){let opt = new Option(arr[inder],inder);//创建一个下拉选项select.options.add(opt);//将选项添加到下拉列表中}}let province = ElementById("province");createOption(province, provinceArr);let city = ElementById("city");hange = ()=>{//当前省份发生变化//清除原有城市下拉选项city.options.length = 0;createOption(city, cityArr[province.value]);//强制city刷新hange();};let country = ElementById("country");hange = () =>{//当城市发生变化，清除原有区域选项country.options.length = 0;createOption(country[province.value])};</script></body></html>
本文发布于:2024-02-02 06:04:58，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170682509741853.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
