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. Java序列化算法

    Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是一种将这些字节重建成一个对象的过程.java序列化API提供一种处理对象序列化的标准机 ...

  2. 一个IP绑定多个域名

    http://www.zhihu.com/question/29390934/answer/44252886

  3. Regex 手机号 座机 正則表達式

    近期在工作中须要推断一个号码是否是手机号,是否是座机号. 在网上也搜到了大家总结的方法,没有直接使用这些方法是由于:手机号码在不断開始新的号码段(比方17x).座机号中个别区号由于行政区域的变化而废除 ...

  4. vs2012停止调试长时间不响应问题解决方法

    在vs2012命令提示符下,运行devenv.exe /resetuserdata又一次设置下环境解决.

  5. MongoDB的一些操作技巧

    去年三月底入职上海的一家互联网公司,由于项目使用的是MongoDB数据库所以有机会接触了MongoDB.在项目的开发过程中使用系统原有的一些方法查询MongoDB感觉很费力,用起来也不爽,所以私下里就 ...

  6. RabbitMQ安装和介绍

    简单的安装方式 yum安装erlang,下载rpm包安装rabbitmq 一.编译安装erlang 1. 官方下载包并解压 wget http://erlang.org/download/otp_sr ...

  7. OpenCV 的四大模块

    前言 我们都知道 OpenCV 是一个开源的计算机视觉库,那么里面到底有哪些东西?本文将为你解答这个问题. 模块一:CV 这个模块是 OpenCV 的核心,它包含了基本的图像处理函数和高级的计算机视觉 ...

  8. Lua_第17 章 数学库

    第17 章 数学库 在这一章中(以下关于标准库的几章中相同)我的主要目的不是对每个函数给出完整地说明,而是告诉你标准库可以提供什么功能.为了可以清楚地说明问题,我可能 会忽略一些小的选项或者行为.基本 ...

  9. kbmmw 5 的日志备份功能简介

    kbmmw 自从4.8.2 版本里增加了日志管理以后,随着版本升级,增加了很多功能,使用方法也有所改变. 功能也越来越强大. 今天说一下 kbmmw5 里面的日志备份,顺便演示一下新的使用方法. 我们 ...

  10. jquery根据(遍历)html()的内容/根据子元素的内容(元素文本)来选择(查询),在子元素前加入元素

    <ul> <li>First</li> <li>second</li> <li>third</li> </ul ...