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. js增加收藏

    <html> <span style="white-space:pre"> </span><head> <span style ...

  2. 程序猿的量化交易之路(30)--Cointrader之ConfigUtil(17)

    转载须注明出处:viewmode=contents">http://blog.csdn.net/minimicall?viewmode=contents.http://cloudtra ...

  3. STL之set具体解释(二)

    首先来看看set集合容器: set集合容器实现了红黑树的平衡二叉树数据结构.在插入元素时它会自己主动调整二叉树的排列,把该元素放到适当的位置,而且 保证左右子树平衡.平衡二叉检索树採用中序遍历算法. ...

  4. web前端面试系列 - 数据结构(两个栈模拟一个队列)

    一. 用两个栈模拟一个队列 思路一: 1. 一个栈s1作为数据存储,另一个栈s2,作为临时数据存储. 2. 入队时将数据压人s1 3. 出队时将s1弹出,并压人s2,然后弹出s2中的顶部数据,最后再将 ...

  5. JS控制input 文本框只允许输入汉字

    onblur="value=value.replace(/[^/u4E00-/u9FA5]/g,'')" onbeforepaste="clipboardData.set ...

  6. ffmpeg api升级到3.3 api变化

     void av_free_packet(AVPacket * pkt) Use void av_packet_unref(AVPacket * pkt) Wipe the packet. Unref ...

  7. toad for oracle中文显示乱码

    toad for oracle中文显示乱码 数据入库的时候中文显示正常,在toad for oracleclient和页面显示都是乱码!!! 原因:在数据入库时候出现的问题. 解决方式: 在系统变量中 ...

  8. ZooKeeper学习笔记(一)

    引导 刚开始学习ZooKeepter,看的书是[O'Reilly Media] ZooKeeper.下面的内容基本上是该书的翻译,很多语句也存在问题,大致读还是没问题的,自己在学习中记录. 第一章 Z ...

  9. (转)c#(wince)中使用多线程访问winform中控件的问题

    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍. 首先来看传统方法:  public partial ...

  10. Embed image in a <button> element 微信小程序 客服按钮

    html - Embed image in a <button> element - Stack Overflow https://stackoverflow.com/questions/ ...