html:

                    <!-- 省 -->
<div class="col-sm-2">
<select name="p_id">
<option value="">请选择省</option>
</select>
</div>
<!-- 市 -->
<div class="col-sm-2">
<select name="c_id">
<option value="">请选择市</option>
</select>
</div>
<!-- 区 -->
<div class="col-sm-2">
<select name="a_id">
<option value="">请选择地区</option>
</select>
</div>

JS:

 // 切换地区(getPositions方法是PHP后台获取地区的信息)
$('select[name=p_id]').change(function () {
if ($(this).val() == '') {
$('select[name=c_id]').html('<option value="">请选择市</option>');
$('select[name=a_id]').html('<option value="">请选择地区</option>');
return false
}
$.post('/store/getPositions', {id: $(this).val()}, function (res) {
if (res.result) {
var str = '<option value="">请选择市</option>';
for (var i in res.data) {
str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>'
}
$('select[name=c_id]').html(str);
$('select[name=a_id]').html('<option value="">请选择地区</option>');
}
}, 'json')
})
$('select[name=c_id]').change(function () {
if ($(this).val() == '') {
return false
}
$.post('/store/getPositions', {id: $(this).val()}, function (res) {
if (res.result) {
var str = '<option value="">请选择地区</option>';
for (var i in res.data) {
str += '<option value="' + res.data[i].id + '">' + res.data[i].name + '</option>'
}
$('select[name=a_id]').html(str);
}
}, 'json')
})

js联动的更多相关文章

  1. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 4个好用的JS联动选择插件

    jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...

  3. js 联动实现日期选择,一般用作生日

    实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年 ...

  4. js联动三级

    自己研究三级加看网上的例子得出来的 <select id="province">   <option value="">----请选择- ...

  5. js 四级联动

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  6. C# select的联动效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...

  7. Jquery调用Ajax实现联动使用json

    在很多时候我们都会使用到联动.jquery.js是一个不错的js框架.其ajax也挺不错.下面将实现一个js联动:选择公司出来受益人.根据公司不同受益人不同. 前提是:你用引入jquery.js &l ...

  8. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  9. day13_H5_CSS_1

    一.标签.HTML是可以被浏览器解析的一套规则 1.a标签:他是主动闭合标签,表现形式<a href="http://www.baidu.com">baidu<a ...

随机推荐

  1. 矩形嵌套-记忆化搜索(dp动态规划)

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 有n个矩形,每个矩形能够用a,b来描写叙述,表示长和宽. 矩形X(a,b)能够嵌套在矩形Y(c,d)中当且仅 ...

  2. 无线(仅WIFI)攻击思路总结

    从事信息安全相关工作5年了,虽然主要工作是安全产品售前.安全服务等方向,但既然选择了安全,想必都是有点黑客情节的,因此也前前后后杂七杂八的学了点东西.最近在研究无线(主要是WIFI)安全,相关书籍看了 ...

  3. bzoj1458 士兵占据

    1458: 士兵占据 Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 685  Solved: 398 [Submit][Status][id=1458 ...

  4. STL源代码剖析——基本算法stl_algobase.h

    前言 在STL中.算法是常常被使用的,算法在整个STL中起到很关键的数据.本节介绍的是一些基本算法,包括equal.fill.fill_n,iter_swap.lexicographical_comp ...

  5. IOS版App的控件元素定位

    前言 Android版App的控件元素可以通过Android studio自带的工具uiautomatorviewer来协助定位! IOS版App的控件元素可以通过Appium来实现(未实现),或ap ...

  6. StringUtils类使用 (转载)

    检查字符串是否为空或null或仅仅包含空格  String test = "";  String test1=" ";  String test2 = &quo ...

  7. 例题6-16 单词 UVa10129

    1.题目描写叙述:点击打开链接 2.解题思路:本题利用欧拉回路存在条件解决. 能够将全部的单词看做边,26个字母看做端点,那么本题事实上就是问是否存在一条路径,能够到达全部出现过的字符端点. 因为本题 ...

  8. 九度OJ 1093:WERTYU (翻译)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:1563 解决:609 题目描述: A common typing error is to place the hands on the ke ...

  9. 第一节 麒麟系统安装+基础环境搭建(JDK+Scala)

    本文重点对没有Linux基础的人员提供高速上手的指导,假设你的开发环境已经搭建好,能够略过本章所讲内容,内容来源于网络.也谢谢这些默默讲自己经验分享的人!近期在学习大数据,有喜欢的朋友能够一起研究. ...

  10. jQuery param()作用与使用方法

    $.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化. $.param(obj) 返回 :string: 说明:将jquery对象按照name ...