概述<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <style type="text/css"> .box{ width: 500px; padding: 20px; bor <!DOCTYPE HTML> <HTML lang="zh-cn"> <head> <Meta charset="utf-8"> <style type="text/CSS"> .Box{ wIDth: 500px; padding: 20px; border: 1px solID #aaa; border-radius: 3px; margin: 100px auto; } .Box select{ wIDth: 150px; } .Box label{ margin:0 20px; } </style> <script type="text/JavaScript"> var provs = [{"ID":"01","pname":"河南省"},{"ID":"02","pname":"河北省"},{"ID":"03","pname":"山西省"},{"ID":"04","pname":"山东省"},{"ID":"05","pname":"四川省"}]; var citys = [{"ID":"001","cname":"安阳市","pID":"01"},{"ID":"002","cname":"郑州市",{"ID":"003","cname":"新乡市",{"ID":"004","cname":"石家庄","pID":"02"},{"ID":"005","cname":"邯郸",{"ID":"006","cname":"大同","pID":"03"},{"ID":"007","cname":"太原",{"ID":"008","cname":"济南","pID":"04"},{"ID":"009","cname":"青岛市",{"ID":"010","cname":"成都","pID":"05"},{"ID":"011","cname":"绵阳市","pID":"05"}]; window.onload = function(){ //1.添加省份选择 var selProv = document.getElementByID(‘province‘); for (var i = 0; i < provs.length; i++) { var opt = document.createElement(‘option‘); opt.INNERHTML = provs[i].pname; // opt.INNERHTML = provs[i][‘pname‘]; // 把省份的ID写入到option的value属性中 opt.value = provs[i].ID; selProv.append(opt); } //2.选中省份后，动态创建出备选城市 var selCity = document.getElementByID(‘city‘); selProv.onchange = function(){ //2.0先清空城市下拉选框的选项 selCity.options.length = 1; //2.1拿到所选省份的ID var pID = this.value; for (var i = 0; i < citys.length; i++) { if(citys[i].pID == pID){ var opt = document.createElement(‘option‘); opt.INNERHTML = citys[i].cname; opt.value = citys[i].ID; selCity.append(opt); } } } } </script> </head> <body> <div > 请选择： <select ID="province"> <option value="00">----请选择----</option> </select><label for="provice">省</label> <select ID="city"> <option value="000">----请选择----</option> </select><label for="provice">市</label> </div> </body> </HTML> 总结
以上是内存溢出为你收集整理的省市联动全部内容，希望文章能够帮你解决省市联动所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
微信扫一扫
支付宝扫一扫
评论列表（0条）