实现的效果为：当选择一个省的时候，会自动出现该省下的市级

效果图如下：

<body>

    <div>

            <!--界面展示-->

            <span>省份：</span>

            <select id="province" onchange="city()">

                <option value="" selected="selected">--请选择--</option>

                <option value="beijing" >北京</option>

                <option value="jiangxi" >江西</option>

                <option value="hunan" >湖南</option>

            </select>

            <span>城市：</span>

            <select id="city">

                <option value="" selected="selected">--请选择--</option>

            </select>

        </div>

</body>

<script>

    function city() {

    //通过Id获取选择的省份

    var provinceObj = document.getElementById('province');

    //根据id获取市级标签

    var cityObj = document.getElementById('city');

    var selectProvince = provinceObj.value;

    //根据选择的省份设置市级标签中的内容

    if(selectProvince == "") {

        cityObj.innerHTML = '<option value="" selected="selected">--请选择--</option>';

    } else if(selectProvince == "beijing") {

        cityObj.innerHTML = '<option value="chaoyangqu" selected="selected">朝阳区</option>' +

            '<option value="tiananmen" >天安门</option>' +

            '<option value="yiheyuan" >颐和园</option>' +

            '<option value="zijincheng" >紫禁城</option>';

    } else if(selectProvince == "jiangxi") {

        cityObj.innerHTML = '<option value="nanchang" selected="selected">南昌</option>' +

            '<option value="ganzhou" >赣州</option>' +

            '<option value="jiujiang" >九江</option>' +

            '<option value="shangrao" >上饶</option>';

    } else if(selectProvince == "hunan") {

        cityObj.innerHTML =

            '<option value="changsha" selected="selected">长沙</option>' +

            '<option value="hy" >衡阳</option>' +

            '<option value="zz" >株洲</option>' +

            '<option value="sy" >邵阳</option>';

    }

}

</script>

JS实现省市联动效果的更多相关文章

  1. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  2. 基于jQuery+JSON的省市联动效果

    省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...

  3. JavaScript(JS)实现省市联动选择下拉列表

    在开发一个应用的时候需要用刀省市联动的下拉列表,网上找到不少.但是要么太复杂,难以修改:要么根本就用不了,最后自己在一个示例中提取出数据,然后自己写了一个,简单易懂,适合新手... 代码如下: Pro ...

  4. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  5. JS 实现省市联动

    使用 JavaScript 实现选择省份,后面联动改变成相应省份下的市 原理很简单: 首先创建两个select下拉框(省.市) 初始化的时候让省都显示出来,市为空  ................. ...

  6. JQuery打造下拉框联动效果

    做联动效果,若是用纯JavaScript来做,往往须要辅助页面保存须要刷新的结果集,然后渲染到原页面.考虑将须要动态刷新的内容自己主动拼接到前一个下拉框之后,当前一个下拉框onchange后,同级的后 ...

  7. jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

    一.插件介绍 最早做省市联动的时候都特别麻烦,后来在helloweba的一篇文章中看到这个插件,很不错的,后来就一直用了. 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最 ...

  8. JS省市区联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在电商网站最为常见.一般使用Ajax实现无刷新下拉联动.利用jQuery,通过读取JSON数据,实现无刷新动态下拉省市二(三)级联动效果. 首先我们可以看 ...

  9. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. 总结day12 ----装饰器

    一,什么是装饰器? 装饰器本质上就是一个python函数,他可以让其他函数在不需要做任何代码变动的前提下,增加额外的功能,装饰器的返回值也是一个函数对象. 装饰器的应用场景:比如插入日志,性能测试,事 ...

  2. [转] spark-submit 提交任务及参数说明

    [From] https://www.cnblogs.com/weiweifeng/p/8073553.html#undefined spark-submit 可以提交任务到 spark 集群执行,也 ...

  3. 【实战】某项目SQL注入引发的思考

    数据包: 测试参数:username,测试payload: ' ' or '1'='1 ' or '1'='2 响应结果都未发生任何变化,借助sqlmap测试,结果一样: 尝试在or前面进行简单的fu ...

  4. C#集合通论

    前言 写这篇文章的最初动力是来自于一次笔试经历.有一道笔试题大概是这样的:程序使用一个txt文件来存储操作记录.存储记录是多行字符串,每一行代表一次操作记录,格式如下:用户名+操作事项名称+操作时间. ...

  5. css hack 汇整

    针对Chrome和Safari等Webkit核心浏览器的CSS hack代码: @media screen and (-webkit-min-device-pixel-ratio:0) { …… } ...

  6. 全网最详细的Git学习系列之介绍各个Git图形客户端（Windows、Linux、Mac系统皆适用ing）（图文详解）

    不多说,直接上干货! 一.TortoiseGit - The coolest Interface to Git Version Control TortoiseGit 是 TortoiseSVN 的  ...

  7. 【开源组件】FastDFS极速入门与安装

    FastDFS是一个开源的轻量级的分布式文件系统,为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并注重高可用.高性能等指标,使用FastDFS很容易搭建一套高性能的文件服务器集群提供 ...

  8. Physik

    0.重点词汇 Der Ortsvektor:位置矢量 Die Verschiebung:位移 Die Geschwendigkeit:速度 Die Beschleunigung:加速度 Die Kre ...

  9. IOS bug之Code Sign error:Provisioning profile

    刚才解决一个版本冲突的bug,记在了博客里,这让我想起了另外一个bug,当时犹豫公司的开发者账号过期了,我打开应用运行时提示Code Sign error:Provisioning profile   ...

  10. js的一些妙用

    在一个数组上  直接附加上另一个数组: Array.prototype.push.apply(array1, array2); 将对象转换成一个数组: Array.prototype.slice.ca ...