js联动
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联动的更多相关文章
- js 联动下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 4个好用的JS联动选择插件
jQuery City Select 一个简单的jQuery省市联动插件,可以自定义JSON字典实现其他内容的联动选择菜单. PCAS省.市.地区联动选择JS封装类 PCAS可能是国内使用人数最多的J ...
- js 联动实现日期选择,一般用作生日
实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年 ...
- js联动三级
自己研究三级加看网上的例子得出来的 <select id="province"> <option value="">----请选择- ...
- js 四级联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...
- C# select的联动效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head&g ...
- Jquery调用Ajax实现联动使用json
在很多时候我们都会使用到联动.jquery.js是一个不错的js框架.其ajax也挺不错.下面将实现一个js联动:选择公司出来受益人.根据公司不同受益人不同. 前提是:你用引入jquery.js &l ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
- day13_H5_CSS_1
一.标签.HTML是可以被浏览器解析的一套规则 1.a标签:他是主动闭合标签,表现形式<a href="http://www.baidu.com">baidu<a ...
随机推荐
- C结构体之位域(位段)(转)
有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态, 用一位二进位即可.为了节省存储空间,并使处理简便,C语言又提供了一种数据结构 ...
- iOS学习笔记12-网络(一)NSURLConnection
一.网络请求 在网络开发中.须要了解一些经常使用的请求方法: GET请求:get是获取数据的意思,数据以明文在URL中传递,受限于URL长度,所以数据传输量比較小. POST请求:post是向serv ...
- 纯JS设置首页,增加收藏,获取URL參数,解决中文乱码
雪影工作室版权全部,转载请注明[http://blog.csdn.net/lina791211] 1.前言 纯Javascript 设置首页,增加收藏. 2.设置首页 // 设置为主页 functio ...
- 利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model
利用泛型和反射,管理配置文件,把Model转换成数据行,并把数据行转换成Model 使用场景:网站配置项目,为了便于管理,网站有几个Model类来管理配置文件, 比如ConfigWebsiteMo ...
- LINUXFOUNDATION EVENTS
http://events.linuxfoundation.org/ #lflks This invitation-only event focuses on development and inno ...
- systemd、upstart和system V
http://blog.csdn.net/kumu_linux/article/details/7653802 systemd是Linux下的一种init软件,由Lennart Poettering ...
- 2016最新手机号码正则、身份证JS正则表达式
js最新手机号码.身份证正则表达式 身份证正则: //身份证正则表达式(15位) isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1] ...
- SpringSecurity学习笔记(一):搭建最简单的SpringSecurity应用
学习过程参考自:http://www.mossle.com/docs/auth/html/pt01-quickstart.html 一.搭建Maven项目: 所需引用的jar包如下: pom.xml文 ...
- React项目结构
任何一种语言.框架,在真正上手的时候,多多少少会想想怎么安排项目结构(正所谓磨刀不误砍柴工),React也不例外. google了下,拿下面3篇博客来说道说道. (1) how-to-better-o ...
- 【BZOJ3505】[Cqoi2014]数三角形 组合数
[BZOJ3505][Cqoi2014]数三角形 Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. ...