1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>城市二级联动</title>
  6.   <style>
  7.     #provice, #city {
  8.       width: 100px;
  9.       height: 30px;
  10.     }
  11.     select {
  12.       width: 100%;
  13.       height: 100%;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18.     <div id="provice">
  19.     <select name="" id="provice_select" onchange="selectProvice()">
  20.     </select>
  21.   </div>
  22.   <br>
  23.   <div id="city">
  24.     <select name="" id="city_select" onchange="selectCity()">
  25.     </select>
  26.   </div>
  27.   <br>
  28.   <button id="btn" onclick="submit()">提 交</button>
  29.  
  30.   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  31.   <script>
  32.     // 初始化获取数据
  33.     var ajaxData = [
  34.       {
  35.         'provice': '北京市',
  36.         'city': ['北京市']
  37.       },
  38.       {
  39.         'provice': '上海市',
  40.         'city': ['上海市']
  41.       },
  42.       {
  43.         'provice': '江苏省',
  44.         'city': ['南京市', '苏州市', '无锡市', '常州市', '南通市', '泰州市', '扬州市', '盐城市', '镇江市', '宿迁市', '淮安市', '徐州市', '连云港市']
  45.       },
  46.       {
  47.         'provice': '浙江省',
  48.         'city': ['杭州市', '建德市', '富阳市', '临安市', '宁波市', '余姚市', '慈溪市', '奉化市', '温州市', '瑞安市', '乐清市', '嘉兴市', '海宁市', '平湖市', '桐乡市', '湖州市', '绍兴市', '诸暨市', '上虞市', '嵊州市', '金华市', '兰溪市', '义乌市', '东阳市', '永康市', '衢州市', '江山市', '舟山市', '台州市', '温岭市', '临海市', '丽水市', '龙泉市']
  49.       }
  50.     ]
  51.     // 提交后返回数据
  52.     var backData = {
  53.       'provice': '江苏省',
  54.       'city': '泰州市'
  55.     }
  56.     var selectedProvice = '', selectedCity = '', strProvice = '', strCity = '', index = 0
  57.  
  58.     // 初始化
  59.     // 初始化省份
  60.     function getProvice (selectedData) {
  61.       // 清空
  62.       strProvice = ''
  63.       $('#provice_select').empty()
  64.       // 渲染
  65.       $.each(ajaxData, function(index, el) {
  66.         strProvice += '<option value="' + el.provice + '">' + el.provice + '</option>'
  67.       });
  68.       $('#provice_select').append(strProvice)
  69.       index = $('#provice_select option:selected').index()
  70.       // 默认选中
  71.       if (selectedData) {
  72.         $('#provice_select').find('option[value=' + selectedData.provice + ']').attr('selected', true);
  73.       }
  74.       index = $('#provice_select option:selected').index()
  75.       getCity(index, selectedData.city)
  76.     }
  77.  
  78.     // 初始化城市
  79.     function getCity (index, selectedData) {
  80.       // 清空
  81.       strCity = ''
  82.       $('#city_select').empty()
  83.       // 渲染
  84.       $.each(ajaxData[index].city, function(index, el) {
  85.         strCity += '<option value="' + el + '">' + el + '</option>'
  86.       });
  87.       $('#city_select').append(strCity)
  88.       // 默认选中
  89.       if (selectedData) {
  90.         $('#city_select').find('option[value=' + selectedData + ']').attr('selected', true);
  91.       }
  92.     }
  93.  
  94.     // 选择省份
  95.     function selectProvice () {
  96.       selectedProvice = $('#provice_select option:selected').val()
  97.       index = $('#provice_select option:selected').index()
  98.       selectCity()
  99.     }
  100.  
  101.     // 选择城市
  102.     function selectCity () {
  103.       selectedCity = $('#city_select option:selected').val()
  104.       getCity(index, selectedCity)
  105.     }
  106.  
  107.     // 提交
  108.     function submit () {
  109.       selectProvice()
  110.       backData.provice = selectedProvice
  111.       backData.city = selectedCity
  112.       console.log(backData)
  113.     }
  114.  
  115.     getProvice(backData)
  116.   </script>
  117. </body>
  118. </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. glob 遍历函数

    例子 1 <?php print_r(glob("*.txt")); ?> 输出类似: Array ( [0] => target.txt [1] => s ...

  2. selenium测试（Java）--截图（十九）

    package com.test.screenshot; import java.io.File; import java.io.IOException; import org.apache.comm ...

  3. Semi-Supervised Classification with Graph Convolutional Networks

    Kipf, Thomas N., and Max Welling. "Semi-supervised classification with graph convolutional netw ...

  4. am335x mux配置

    /**************************************************************** * am335x mux配置 * * am335x的引脚复寄存器是C ...

  5. QMainWindow + QtabWidget 实现 菜单栏 和 标签

    from PyQt5.QtWidgets import ( QMainWindow, QMenu, QAction, QTabWidget) if __name__ == '__main__': im ...

  6. PHP curl_setopt函数用法介绍上篇

    最近,学习与实践了php中curl的知识点.在此做个初步的总结: 先看看对于它的基本介绍: curl_setopt函数是php中一个重要的函数,它可以模仿用户的一些行为,如模仿用户登录,注册等等一些用 ...

  7. Java精选笔记_IO流【File(文件)类、遍历目录下的文件、删除文件及目录】

    File(文件)类 File类用于封装一个路径,该路径可以是从系统盘符开始的绝对路径,也可以是相对于当前目录而言的相对路径 File类内部封装的路径可以指向一个文件,也可以指向一个目录,在使用File ...

  8. python2.0_s12_day11_SqlAlchemy使用介绍

    SqlAlchemy ORM ORM的解释; 简单点:对象关系映射. 需求:我们写一个主机管理,把主机信息存在数据库,一开始我们编程不熟练的时候,执行命令时候要调用数据库,会把相应的SQL语句写到代码 ...

  9. shell基础篇(二)-shell变量

    1. 定义变量 1).定义变量时,变量名不加美元符号($),如: var="hello world"2).注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样.同 ...

  10. docker学习-docker核心技术

    镜像:集装箱     ---build 仓库:超级码头  ----ship 容器:运行程序的地方    ----run docker运行一个程序的过程:去仓库把镜像拉到本地,然后用一条命令把镜像运行起 ...