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

效果图如下：

<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. leetcode-887-三维形体投影面积

    题目描述: 在 N * N 的网格中,我们放置了一些与 x,y,z 三轴对齐的 1 * 1 * 1 立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. ...

  2. 【Quartz】基本原理

    1 核心概念 1.1    核心元素 (1)Scheduler 任务调度器,是Quartz框架的核心,负责管理其他组件. (2)Trigger 触发器,用于定义任务调度的时间规则,有SimpleTri ...

  3. webpack/gulp的z-index被改写

    webpack方法 new OptimizeCSSPlugin({ cssProcessorOptions: { safe: true } }) gulp-cssnano 方法 .pipe(cssna ...

  4. h5 html5 模拟时钟 页面

    <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...

  5. Ribbon是什么？

    学而时习之,不亦说乎!                              --<论语> Ribbon使用版本2.2.2 Ribbon是什么? 开始接触Ribbon的时候,网上以及很 ...

  6. 有道词典命令行查询工具（Mac/Ubuntu）

    说明:此工具是基于node.js的,所以必须安装npm. 官网:https://github.com/kenshinji/yddict 安装: Mac: # 安装npm brew install np ...

  7. vue中的双向数据绑定详解

    前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...

  8. （转载）IDEA新建项目时，没有Spring Initializr选项

    最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot. 看着博客来进行操作上手spring boot,很多都是说 创建一个新项目(Create New Project) 选 ...

  9. hibernate一对多多对一双向

    注意事项:一对多,多对一双向关联,在一的一方的多的getSet集合上的oneToMany上加上mappedBy.告诉hibernate由多的方一来维护关系.这也符合逻辑 ,本来外键就是在加在多的一方. ...

  10. 控制反转（IOC) 和依赖注入(DI) 的理解

    1.      IOC(控制反转) inverseof control是spring容器的内核,AOP.声明事务等功能在此基础上开花结果. 2.      通过实例理解IOC概念: 实例:<墨攻 ...