程序博客网 > windows怎么换苹果系统

省份与城市对应选择的功能javascript

来源：互联网发布：windows怎么换苹果系统编辑：程序博客网时间：2024/04/30 02:03

网页内的代码：

<body onload="loadprovince()"><select id="province" onchange="cityitems()"><option value="none">请选择省</option></select><select id="city"></select></body>

javascript代码：

oSelect.options.add(new Option('显示', '真值', true, true));

var datas = { "河北": ["石家庄", "唐山", "衡水"], "山东": ["济南", "烟台", "滨州"], "广东": ["广州", "深圳", "汕头"] }; function loadProvince() { var province = document.getElementById("province"); for (var key in datas) { var option = document.createElement("<option value=''></option>");//创建省份的选项 option.value = key; option.innerText = key; province.appendChild(option);//在遍历过程中逐一添加省份的选项中 } } function showcities() { var province = document.getElementById("province"); var city = document.getElementById("city"); var currentprovine = province.value;//获取当前选中的省份 var currentcities = datas[currentprovine]; //获取选中省份对应的城市数组 //方法一：先去掉城市列表中的值然后再增加新内容 //city.options.length = 0; //方法二：先去掉城市列表中的值然后再增加新内容,对数组要进行倒着删除从而避免了方法三的问题 for (var i = city.childNodes.length-1; i >= 0; i--) { city.removeChild(city.childNodes[i]); } /*方法三：由于数据的排序问题会删不干净 for (var i = 0; i < city.childNodes.length; i++) { city.removeChild(city.childNodes[i]); } */ for (var i = 0; i < currentcities.length; i++) { var currentcity = currentcities[i]; var option = document.createElement("<option value=''></option>"); //创建城市的选项 option.value = currentcity; option.innerText = currentcity; city.appendChild(option); //在遍历过程中逐一添加到城市的选项中 } }

另外一种利用class的方法去掉city中的项：

var province = document.getElementById("province"); var city = document.getElementById("city"); //city.options.length = 0; //简单的清除方式 /*移除节点法 for (var i = city.childNodes.length - 1; i >= 0; i--) { city.removeChild(city.childNodes[i]); } */ var cityoptions = city.getElementsByTagName("option"); for (var i = cityoptions.length - 1; i >= 0; i--) { if (cityoptions[i].className == "citystyle") { city.removeChild(cityoptions[i]); } } var currentpe = province.value; //当前的省份 var citys = datas[currentpe]; //省份对应的城市 if (currentpe == "none") { return; } for (var i = 0; i < citys.length; i++) { var option = document.createElement("<option value='' class='citystyle'></option>"); option.value = citys[i]; option.innerText = citys[i]; city.appendChild(option); }

jquery版：

var datas = { "河北省": ["衡水", "保定", "石家庄"], "山东省": ["滨州", "济南", "青岛"], "广东省": ["广州", "深圳", "汕头"] }; $(function () { $.each(datas, function (key, value) { var option = $("<option value=" + key + ">" + key + "</option>"); $("#province").append(option); }); $("#province").change(function () { var selectprovine = $("#province").val(); //获取当前省份 $("#city option").remove(); //清空city列表 if (selectprovine == "none") { return; } $(datas[selectprovine]).each(function () { var cityoption = $("<option value=" + this + ">" + this + "</option>"); $("#city").append(cityoption); }); }); });

网页布局：

<select id="province"><option value="none">请选择</option></select><select id="city"></select>

windows怎么换苹果系统

windows怎么换苹果系统

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子坤辉钢帘线废旧钢帘线钢帘线用途钢帘线生产工艺晓星钢帘线有限公司钢的线密度钢帘线生产流程子午线轮胎用钢帘线贝卡钢帘线贝卡尔特钢帘线贝卡尔特钢帘线有限公司钢绳价格江苏巨力钢绳有限公司钢绳规格钢绳细钢丝绳钢丝绳厂家钢丝绳直径规格钢丝绳价格吊车钢丝绳买钢丝绳钢丝绳卡环正确图钢丝绳规格技术参数 6mm钢丝绳承重钢丝绳批发钢丝绳的规格钢丝绳规格型号钢丝绳型号钢丝绳标准钢丝绳价格表钢丝绳生产厂家料斗钢丝绳卡扣规范软钢丝绳钢丝绳型号规格表钢缆半钢全钢钢套钢预制保温管价格钢网钢结构招聘网找钢网 a钢网