DOM之城市二级联动

1、HTML内容

<select id="province"><option>请选择</option><option>山东省</option><option>吉林省</option><option>上海市</option></select><select id="city"><option>请选择</option></select>

2、JS

var provinceE=document.getElementById("province");provinceE.onchange=function(){var city=document.getElementById("city");var opts=city.getElementsByTagName("option");for(var z=opts.length-1;z>0;z--){city.removeChild(opts[z]);}var province=provinceE.value;//alert(province);var citys=[];switch (province){case "山东省":citys=["青岛市","济南市","威海市","日照市","德州市"];break;case "吉林省":citys=["长春市","四平市","辽源市","通化市","白山市"];break;case "上海市":citys=["嘉定区","普陀区","黄浦区","虹口区","长宁区"];break;}for(var i=0;i<citys.length;i++){var option=document.createElement("option");var textNode=document.createTextNode(citys[i]);option.appendChild(textNode);city.appendChild(option);}}

DOM之城市二级联动相关推荐

Ajax实现的城市二级联动一
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"><o ...
web中ajax实现二级联动,Ajax实现城市二级联动（一）
前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html 请选择山东省辽宁省吉林省请选择 2.javascript /* * 需要思考哪 ...
mysql 城市二级联动_MYSQL二级联动
表数据查询结果 { "电器": [{ "1": [{ "parent_id": "1", "parent_n ...
Ajax案例-基于XML，以POST方式，完成省份-城市二级下拉联动
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC & ...
前端：JS/35/二级联动菜单，select对象，select对象的属性，option对象，option对象属性，实例：省份列表与城市列表的联动
二级联动菜单 select 对象一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
原生JavaScript实现城市二级三级联动
原生JavaScript实现城市二级三级联动一,HTML代码 <select id="province" onchange="chooseProvince(th ...
AJAX之二级联动下拉列表
AJAX的核心是JavaScript对象XMLHttpRequest.是一种异步请求的技术,不用刷新整个页面就可以与服务器进行交互.本文就以二级联动下拉列表为例: 获取AJAX对象js代码: func ...
Vue -- 配合iView实现省市二级联动
在实现省市二级联动时,如果省份和城市写在一个数组对象中.可以根据,点击某个省份时获取到目标省份的id 是否同数组中的某个对象id一致来判断 iView中的on-change事件 on-change ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...

DOM之城市二级联动

DOM之城市二级联动相关推荐

最新文章

热门文章