js 创建二级菜单

来源：互联网发布：淘宝需要营业执照吗编辑：程序博客网时间：2024/04/30 05:19
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">var provinceArr = ['湖北', '江西', '河南'];var cityArr = [['武汉', '黄石', '宜昌', '荆州'],['南昌', '九江', '赣州'],['郑州', '洛阳', '开封']];/** * 初始化省份的select */function initProvince() {var provinceSelect = document.getElementById("province");for(var i = 0; i < provinceArr.length; i++) {var opt = document.createElement("option");opt.innerHTML = provinceArr[i];opt.value = provinceArr[i];//将option添加到selectprovinceSelect.appendChild(opt);}//初始化city的selectchangeCity(0);}//动态创建option，添加到cityfunction changeCity(selectedIndex) {//清除原有的optionvar citySelect = document.getElementById("city");var cityOptions = citySelect.childNodes;//从高位开始移除（如果从低位移除，会有元素删不掉）for(var j = cityOptions.length - 1; j >= 0; j--) {citySelect.removeChild(cityOptions[j]);}//1.首先取到省份对应的城市var cities = cityArr[selectedIndex];//2.创建optionfor(var i = 0; i < cities.length; i++) {var opt = document.createElement("option");opt.innerHTML = cities[i];opt.value = cities[i];citySelect.appendChild(opt);}}function generateAddress() {//select.selectedOptions (被选中的所有的option 数组)var selectedProvince = document.getElementById("province").selectedOptions;var selectedCity = document.getElementById("city").selectedOptions;var detailAddress = document.getElementById("detailAddress");var lastAddress = selectedProvince[0].value + "省" + selectedCity[0].value + "市" + detailAddress.value;document.getElementById("lastAddress").innerHTML = lastAddress;}</script></head><body><!-- select : selectedIndex 被选中的option的下标--><select id="province" onchange="changeCity(this.selectedIndex)"></select><select id="city"></select>详细地址：<input id="detailAddress" placeholder="请输入详细地址" /><br /><input type="button" onclick="generateAddress()" value="生成详细地址" /><span id="lastAddress"></span><script type="text/javascript">initProvince();</script></body></html>
0 0