<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    
    function showCity(){
        //维护一个二维数组存储省份对应的城市
        var citys = [[],["广州","佛山","湛江","中山"],["长沙","衡阳","岳阳","郴州"],["南宁","桂林","贵港","柳州"]];            
    
        //获取省份对应的节点
        var provinceNode = document.getElementById("province");
        //获取省份选中的选项
        var selectIndex =  provinceNode.selectedIndex;
        //获取对应的城市
        var  cityDatas = citys[selectIndex];
        
        //找到city节点
        var cityNode = document.getElementById("city");
        
        /*
        //先清空city框所有option
        var children = cityNode.childNodes;
        for(var i = 0; i<children.length ; ){
            cityNode.removeChild(children[i]);
        }
        */
        
        //设置options的个数。
        cityNode.options.length = 1 ;
        
        
        
        //遍历对应的所有城市然后创建对应的option添加到city上。
        for(var index = 0; index<cityDatas.length ; index++){
            var option = document.createElement("option");
            option.innerHTML = cityDatas[index];
            cityNode.appendChild(option);
        }
        
        
    
    }
    
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    省份<select id="province" onchange="showCity()">
            <option>省份</option>
            <option>广东</option>
            <option>湖南</option>
            <option>广西</option>
        </select>
    城市<select id="city"><option>城市</option></select>
    
</body>
</html>

HTML城市联动的更多相关文章

  1. 全国三级城市联动 js版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JQUERY省、市、县城市联动选择

    JQUERY 插件开发——CITYLINKAGE(省.市.县城市联动选择) 第一部分:背景   开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前 ...

  3. JS中简单的二级城市联动

    代码奉上: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    < ...

  4. 城市联动 - 自动生成SQL语句

    字段比较简单/  如果有需要可以自己定制字段和排序/ 一共二级城市联动, 本人业务需要, 所以就两层, 网上关于三层的挺多, 有需要可以借鉴/ 废话不多说, 先看效果图, 代码在下面 <?php ...

  5. java基础68 JavaScript城市联动框(网页知识)

    1.城市联动框 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  6. Jquery 插件开发——citylinkage(省、市、县城市联动选择)

    第一部分:背景  开发源于需求,本次城市联动选择插件算是我写插件的一个特例吧,不是我目前工作需要些的,算是兴趣驱使吧.之前呢,一直想写这个插件,然后错过了一个写这个插件的机会(这个得回顾到很久以前了. ...

  7. jQuery+ajax城市联动

    分享一下自己最近写的城市联动.技术使用ajax+jQuery实现. 首先请看前台的javascript代码. 以下是连个实现异步加载的方法. <script type="text/ja ...

  8. thinkPHP三级城市联动

    html+js: <!doctype html> <html lang="en"> <head> <meta charset=" ...

  9. 通过城市联动实时将地址显示到text中

    <div class="form-group field-supplier-sort <?php if($model->getErrors('province_id') | ...

  10. vue select二级城市联动及第二级默认选中第一个option值

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine&qu ...

随机推荐

  1. Ubuntu 16.04安装网络流量监控工具Netspeed(附带10款最佳的指示器工具)

    安装: sudo add-apt-repository ppa:ferramroberto/linuxfreedomlucid sudo apt-get update sudo apt-get ins ...

  2. Ubuntu 16.04安装***-qt5

    上一篇文章http://www.cnblogs.com/EasonJim/p/7133097.html中,第5步安装本地代理源服务器使用的是electron-ssr,发觉这个东西难配且难用,非常不建议 ...

  3. 智能眼镜技术科普:VR、AR、MR的区别

    前段时间, 获得谷歌5亿美元融资的技术公司Magic Leap在WSJD展会中放出了一段实录视频,引起不小骚动.如今,也有媒体称他们为MR公司,那么VR.AR.MR之间到底有什么区别呢. VR.AR. ...

  4. 如何利用神经网络和Python生成指定模式的密码

    今天给大家介绍的是Github上一个名叫PyMLProjects的项目,这个项目的目的是为了训练AI来学习人类构造密码的模式,然后我们就可以用AI来生成大量同一模式或种类的密码了.这种方法也许可以用来 ...

  5. Django学习系列之结合ajax

    AJAX简介 什么是AJAX AJAX = 异步JavaScript 和 XML(Asynchronous JavaScript and XML) 通过在后台于服务器进行少量数据交换,AJAX可以使网 ...

  6. PLC基础入门

    PLC编程入门基础技术知识学习 2016-06-27  xjp7879  摘自 电工技术知...     第一章  可编程控制器简介 可编程序控制器,英文称Programmable Controlle ...

  7. Application特征

    1.位置:服务器内存,执行速度快2.使用范围:整个应用程序3.类型:任意类型4.声明周期:应用程序开始创建到销毁

  8. C# .NET using ManagementObjectSearcher提示缺少引用怎么办

    在下图中,即使引用了System.Management还是会出现报错   其实只要添加这条引用就可以了

  9. html5 虚拟键盘弹出挡住底部的输入框解决方案

    问题描述: 我们使用 h5 做移动网站开发时,如果文本框在页面的下方,当输入信息弹出的软键盘会将输入框挡住(Android 会有这个问题,IOS会自动将整个页面上移),IOS中软键盘关闭后,页面上移的 ...

  10. MySql command line client 命令系列

    —————————————————————————————————————————————————————————— 一.启动与退出 1.进入MySQL:启动MySQL Command Line Cl ...