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

效果图如下：

<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. delphi 10.2 ----简单的叠乘例子

    unit Unit11; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...

  2. C语言数据结构之哈夫曼树及哈夫曼编码的实现

    代码清单如下: #pragma once #include<stdio.h> #include"stdlib.h" #include <string.h> ...

  3. 图的最小生成树的理解和实现：Prim和Kruskal算法

    最小生成树 一个连通图的生成树是一个极小的连通子图,它含有图中所有的顶点,但只有足以构成一棵树的n-1条边.我们将构造连通网的最小代价生成树称为最小生成树(Minimum Cost Spanning ...

  4. Nodejs统计每秒记录日志数

    问题:线上的写日志操作非常频繁,想统计每秒写了多少行数据?假如没法送一个消息写一个日志,问题也就变成了,每秒发送多少消息了. 日志采用log4js书写,格式如下: [-- ::33.548] [INF ...

  5. CodeForces - 1025B Weakened Common Divisor

    http://codeforces.com/problemset/problem/1025/B 大意:n对数对(ai,bi),求任意一个数满足是所有数对中至少一个数的因子(大于1) 分析: 首先求所有 ...

  6. 03-树2 List Leaves （25 分)

    Given a tree, you are supposed to list all the leaves in the order of top down, and left to right. I ...

  7. java容器类1：Collection,List,ArrayList,LinkedList深入解读

    1. Iterable 与 Iterator Iterable 是个接口,实现此接口使集合对象可以通过迭代器遍历自身元素. public interface Iterable<T> 修饰符 ...

  8. 18.async函数

    1.含义 async 函数是什么?一句话,它就是 Generator 函数的语法糖. 前文有一个 Generator 函数,依次读取两个文件. var fs = require('fs'); var ...

  9. 字符编码的来源，ascii、unicode和utf-8编码的关系

    字符编码 我们已经讲过了,字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采用8个比特 ...

  10. 解决emacs配置tern报错`tern-reparse-on-idle':

    使用Nodejs安装完tern后,在/user/local/bin建立软连接