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. python(7)- 小程序练习:循环语句for,while实现99乘法表

    打印99乘法表 for 循环语句实现: for i in range(1,10): for j in range(1,10): print(j,"x",i,"=" ...

  2. AVL平衡树的插入例程

    /* **AVL平衡树插入例程 **2014-5-30 11:44:50 */ avlTree insert(elementType X, avlTree T){ if(T == NULL){ T = ...

  3. 如何清除本地DNS缓存 windows

    在您的网站迁移服务器时需要对域名所指向的IP进行更改,这时候在本机访问网站时就需要清除本地的DNS缓存信息,那么怎样清除呢? 首先我们应该明白清除DNS缓存信息的原理:当计算机对域名访问时并不是每次访 ...

  4. 什么是SDN(软件定义网络)(转载)

    软件定义网络(Software Defined Network, SDN)在InfoWorld于2011年11月公布的将影响未来10年的十项新技术中排名第二.2012年7月,SDN代表厂商Nicira ...

  5. linux shell 的前世今生和流行BASH SHELL的特点

    前言 shell作为用户和操作系统内核交互的接口,也不断的在发展迭代.shell的发展也离不开unix/linux 系统的发展.并且在开源社区对shell的发展也起到了推动作用. 内容思维导图简介 发 ...

  6. 多线程(C++)临界区Critical Sections

    一 .Critical Sections(功能与Mutex相同,保证某一时刻只有一个线程能够访问共享资源,但是不是内核对象,所以访问速度比Mutex快,但是没有等待超时的功能,所以有可能导致死锁,使用 ...

  7. 基于EasyDarwin实现幼儿园监控类项目

    移动互联网越来越普及,幼儿园监控类的项目也越来越多,如何能够以最低的成本.最快的速度搭建一套幼儿园监控类的平台成了许多开发者的需求,那么我们今天就来简单探讨一下如何基于EasyDarwin实现一套幼儿 ...

  8. Part of defining a topology is specifying for each bolt which streams it should receive as input

    http://storm.apache.org/ [doing for realtime processing what Hadoop did for batch processing ] Apach ...

  9. checkbox复选框的使用

    复选框: <input type="checkbox" name="favor" value="唱歌"/>唱歌    <i ...

  10. Android Button Maker(在线生成android shape xml文件的工具),真方便!

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/scry5566/article/details/25379275        直接上地址:http ...