用jsp和js编程二级联动下拉列表的代码?

img

这个需要结合数据库和jQuery来实现，具体还要看你的基层代码

<script>
// 省份数据
var provinces= ["广东省","湖南省","广西省"];
// 城市数据，数据是一个二维数组，一维中每个元素是一个数组
var cities = [["深圳","广州","东莞"],["长沙市","郴州市","湘潭市"],["南宁市","桂林市","柳州市"]];
/*
在页面加载完毕以后读取所有的省份，并且填充到#province中
分析：动态创建option对象，并且设置

  • 这个value就是它对应的城市数组索引
    */
    window.onload = function () {
    //1.得到省份这个select对象
    let selectProvince = document.getElementById("province");
    //遍历省份这个数组
    for (let i = 0; i < provinces.length; i++) {
    let province = provinces[i]; //i=0 province=广东省
    //2.创建option对象
    let optionElement = document.createElement("option");
    //3.设置value和文本
    optionElement.value = i;
    optionElement.innerText = province;
    //4.添加到select的最后一个子元素: 父元素.appendChild(子元素)
    selectProvince.appendChild(optionElement);
    }
    }
    /**
    * 省份下拉列表的改变事件
    */
    document.getElementById("province").onchange = function () {
    //alert(this.value); //value就是它的索引
    var arr = cities[this.value]; //得到相应城市的数组
    //得到城市下拉select对象
    let city = document.getElementById("city"); //city下拉列表对象
    //修改city中innerHTML
    city.innerHTML = "
  • "; //覆盖原来的HTML子元素
    //向城市下拉列表添加option
    //1. 遍历城市数组
    for (let i = 0; i < arr.length; i++) {
    let arrElement = arr[i]; //每个城市字符串
    //2. 创建option对象

  • let optionElement = document.createElement("option");
    //3. 设置文本
    optionElement.innerText = arrElement;
    //4. 添加到select的最后一个子元素: 父元素.appendChild(子元素)
    city.appendChild(optionElement);
    }
    }
    </script>