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

效果图如下：

<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. Myeclipse设置自动联想功能

    ///声明,博客园暂无转载功能,这篇博客是转载自贞心真义. 最近初学Java,正在使用MyEclipse来编写新的项目,刚开始打开MyEclipse感觉这个工具既陌生又熟悉,熟悉之处在于编辑器的几大共 ...

  2. angular4套用primeng样式

    首先安装primeng cnpm install primeng --save 这样会在项目目录中增加node_modules\primeng目录 package.json文件增加了以下一行 &quo ...

  3. jQuery 发送 ajax json 请求。。

    $.extend({ postJson: function (data) { data = data || {} $.ajax({ type: "POST", url: data. ...

  4. Powershell cannot be loaded because running scripts is disabled on this system 解决办法

    问题背景 第一次跑ps时,出现了下面的提示.这是因为windows不允许执行脚本而已,不要大惊小怪. 解决办法 这个需要管理员执行,不然会出现以下的情况 正常情况

  5. 关于Vue中main.js，App.vue，index.html之间关系进行总结

    在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到: index.html---主页,项目入口 App. ...

  6. BZOJ - 2500 树形DP乱搞

    题意:给出一棵树,两个给给的人在第\(i\)天会从节点\(i\)沿着最长路径走,求最长的连续天数\([L,R]\)使得\([L,R]\)为起点的最长路径极差不超过m 求\(1\)到\(n\)的最长路经 ...

  7. Android之build.prop属性详解

    注:本篇文章是基于MSD648项目(AndroidTV)的prop进行说明. Android版本:4.4.4 内核版本:3.10.86 1.生成build.prop build.prop的生成是由ma ...

  8. jquery问题汇总

    One:Uncaught SyntaxError: Unexpected token $.post('/ajax/validate.do',{"id": id},function( ...

  9. [DPF] DPF 常见的问题

    问题一: SQL6031N  Error in the db2nodes.cfg file at line number "5".  Reason code "12&qu ...

  10. Java并发编程——阻塞队列BlockingQueue

    Java 并发编程系列文章 Java 并发基础——线程安全性 Java 并发编程——Callable+Future+FutureTask java 并发编程——Thread 源码重新学习 java并发 ...