在网站开发中,经常需要设置省市地址选项,以方便用户选择信息。
HTML中可以使用下拉列表形式来设置省市地址。
@H_502_9@ <select name="province" id="province" onchange="changeCity(this.value)"> <option value="" selected>请选择省份</option> <option value="1">北京市</option> <option value="2">上海市</option> <option value="3">天津市</option> <option value="4">重庆市</option> <option value="5">河北省</option> <option value="6">山西省</option> <option value="7">辽宁省</option> <option value="8">吉林省</option> <option value="9">黑龙江省</option> <option value="10">江苏省</option> <option value="11">浙江省</option> <option value="12">安徽省</option> <option value="13">福建省</option> <option value="14">江西省</option> <option value="15">山东省</option> <option value="16">河南省</option> <option value="17">湖北省</option> <option value="18">湖南省</option> <option value="19">广东省</option> <option value="20">广西壮族自治区</option> <option value="21">海南省</option> <option value="22">四川省</option> <option value="23">贵州省</option> <option value="24">云南省</option> <option value="25">西藏自治区</option> <option value="26">陕西省</option> <option value="27">甘肃省</option> <option value="28">青海省</option> <option value="29">宁夏回族自治区</option> <option value="30">新疆维吾尔自治区</option> <option value="31">台湾省</option> <option value="32">香港特别行政区</option> <option value="33">澳门特别行政区</option> </select> <select name="city" id="city"></select>通过JavaScript实现动态触发下拉列表。
@H_502_9@ function changeCity(province) { var city = document.getElementById('city'); city.options.length = 0; switch (province) { case '1': city.options.add(new Option('请选择城市','')); city.options.add(new Option('北京市','1')); break; case '2': city.options.add(new Option('请选择城市','')); city.options.add(new Option('上海市','2')); break; case '3': city.options.add(new Option('请选择城市','')); city.options.add(new Option('天津市','3')); break; case '4': city.options.add(new Option('请选择城市','')); city.options.add(new Option('重庆市','4')); break; case '5': city.options.add(new Option('请选择城市','')); city.options.add(new Option('石家庄市','51')); city.options.add(new Option('唐山市','52')); break; // 后续省市可以自行补充 default: break; } }以上代码可以实现省市地址的设置和动态展示。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。