<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>城市二级联动</title>

  <style>

    #provice, #city {

      width: 100px;

      height: 30px;

    }

    select {

      width: 100%;

      height: 100%;

    }

  </style>

</head>

<body>

    <div id="provice">

    <select name="" id="provice_select" onchange="selectProvice()">

    </select>

  </div>

  <br>

  <div id="city">

    <select name="" id="city_select" onchange="selectCity()">

    </select>

  </div>

  <br>

  <button id="btn" onclick="submit()">提 交</button>

  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

  <script>

    // 初始化获取数据

    var ajaxData = [

      {

        'provice': '北京市',

        'city': ['北京市']

      },

      {

        'provice': '上海市',

        'city': ['上海市']

      },

      {

        'provice': '江苏省',

        'city': ['南京市', '苏州市', '无锡市', '常州市', '南通市', '泰州市', '扬州市', '盐城市', '镇江市', '宿迁市', '淮安市', '徐州市', '连云港市']

      },

      {

        'provice': '浙江省',

        'city': ['杭州市', '建德市', '富阳市', '临安市', '宁波市', '余姚市', '慈溪市', '奉化市', '温州市', '瑞安市', '乐清市', '嘉兴市', '海宁市', '平湖市', '桐乡市', '湖州市', '绍兴市', '诸暨市', '上虞市', '嵊州市', '金华市', '兰溪市', '义乌市', '东阳市', '永康市', '衢州市', '江山市', '舟山市', '台州市', '温岭市', '临海市', '丽水市', '龙泉市']

      }

    ]

    // 提交后返回数据

    var backData = {

      'provice': '江苏省',

      'city': '泰州市'

    }

    var selectedProvice = '', selectedCity = '', strProvice = '', strCity = '', index = 0

    // 初始化

    // 初始化省份

    function getProvice (selectedData) {

      // 清空

      strProvice = ''

      $('#provice_select').empty()

      // 渲染

      $.each(ajaxData, function(index, el) {

        strProvice += '<option value="' + el.provice + '">' + el.provice + '</option>'

      });

      $('#provice_select').append(strProvice)

      index = $('#provice_select option:selected').index()

      // 默认选中

      if (selectedData) {

        $('#provice_select').find('option[value=' + selectedData.provice + ']').attr('selected', true);

      }

      index = $('#provice_select option:selected').index()

      getCity(index, selectedData.city)

    }

    // 初始化城市

    function getCity (index, selectedData) {

      // 清空

      strCity = ''

      $('#city_select').empty()

      // 渲染

      $.each(ajaxData[index].city, function(index, el) {

        strCity += '<option value="' + el + '">' + el + '</option>'

      });

      $('#city_select').append(strCity)

      // 默认选中

      if (selectedData) {

        $('#city_select').find('option[value=' + selectedData + ']').attr('selected', true);

      }

    }

    // 选择省份

    function selectProvice () {

      selectedProvice = $('#provice_select option:selected').val()

      index = $('#provice_select option:selected').index()

      selectCity()

    }

    // 选择城市

    function selectCity () {

      selectedCity = $('#city_select option:selected').val()

      getCity(index, selectedCity)

    }

    // 提交

    function submit () {

      selectProvice()

      backData.provice = selectedProvice

      backData.city = selectedCity

      console.log(backData)

    }

    getProvice(backData)

  </script>

</body>

</html>

jq简单城市二级联动实现的更多相关文章

  1. js实现城市二级联动列表

    这个是一个同事写的,我看着有用,就cv下来了. 程序功能主要逻辑是: 1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏 2.一级标签选中城市时,二级标签显示在页面,并列出响应市区 3.当 ...

  2. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  3. 利用JS实现一个简单的二级联动菜单

    前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...

  4. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. 通同select便签实现简单的二级联动

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

  6. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  7. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

  8. jquery $.post() 向php传值 实现简单的二级联动

    更多内容推荐微信公众号,欢迎关注: 1 其中selectid是一个下拉菜单的id $().ready(function () { $("#selectid").change(fun ...

  9. jQuery学习(六)——使用JQ完成省市二级联动

    1.JQ的遍历操作 方式一: 1 $(function(){ //全选/全不选 $("#checkallbox").click(function(){ var isChecked= ...

随机推荐

  1. linux -- #!/bin/bash

    #!/bin/bash是指此脚本使用/bin/bash来解释执行. 其中,#!是一个特殊的表示符,其后,跟着解释此脚本的shell路径. bash只是shell的一种,还有很多其它shell,如:sh ...

  2. mac下普通用户无法创建crontab的问题解决

    想在mac下弄一个crontab定时任务,以为会像linux上那样顺利那,结果碰壁了,报错信息例如以下: ➜  autoshell  crontab -ecrontab: no crontab for ...

  3. 利用kseq.h parse fasta/fastq 文件

    在分析中经常需要统计fasta/fastq文件的序列数和碱基数, 但是没有找到一些专门做这件事的小工具,可能是这个功能太简单了: 之前用自己写的perl的脚本统计这些信息, 当fastq文件非常大时, ...

  4. linux安装ant

    1.从http://ant.apache.org 上下载tar.gz版ant 2.复制到/usr下 3.tar -vxzf apahce-ant-1.9.2-bin.tar.gz  解压 4.chow ...

  5. 在word文档中如何插入Mathtype公式

    将mathtype公式插入到word文档中,是mathtype公式编辑器最基本的操作.当在Mathtype数学公式编辑器中编辑好公式之后,点击文件->更新XXX文档(XXX为当前编辑的word文 ...

  6. SQL Server死锁的解除方法

    如果想要查出SQL Server死锁的原因,下面就教您SQL Server死锁监控的语句写法,如果您对此方面感兴趣的话,不妨一看. 下面的SQL语句运行之后,便可以查找出SQLServer死锁和阻塞的 ...

  7. VC++ 使用MSSOAP访问WebService天气服务（客户端开发）

    绪论 本文介绍使用VC++编程实现访问天气Web服务的简单实例(例子来源于网络). Web天气服务 http://www.webxml.com.cn/WebServices/WeatherWebSer ...

  8. JsonConvert.DeserializeAnonymousType

    string JsApiTicketString = string.Empty; using (StreamReader reader = new StreamReader(response.GetR ...

  9. python计算时间差的方法

    本文实例讲述了python计算时间差的方法.分享给大家供大家参考.具体分析如下: 1.问题: 给定你两个日期,如何计算这两个日期之间间隔几天,几个星期,几个月,几年? 2.解决方法: 标准模块date ...

  10. hadoop程序MapReduce之DataSort

    需求:对文件中的数据进行排序. 样本:sort.log 10 13 10 20 输出:1 10 2 10 3 13 4 20 分析部分: mapper分析: 1.<k1,v1>k1代表:行 ...