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 ...
随机推荐
- windows环境下生成ssh keys
参考:https://www.cnblogs.com/achengmu/p/6095046.html 1.首先你要安装Git工具 2.运行Git Bash here 3.输入指令,进入.ssh文件夹 ...
- 请问如何突破”所选文件超出了文件的最大值设定:25.00 Mb“限制
警告消息 这个限制 并没有 设置项, 必须 修改 源码才可以. 打开 web/static/src/js/views/form_widgets.js ...
- 音频单元组件服务参考(Audio Unit Component Services Reference)
目录 了解Audio Unit体系结构 文档结构预览 结构单元介绍 本文主要介绍AudioUnit的组成 本文由自己理解而成,如有错误,请欢迎网友们指出校正. 了解Audio Unit体系结构 开始前 ...
- nyoj 135 取石子(二) 【NIM】
取石子(二) 时间限制:3000 ms | 内存限制:65535 KB 难度:5 描写叙述 小王喜欢与同事玩一些小游戏.今天他们选择了玩取石子. 游戏规则例如以下:共同拥有N堆石子.已知每堆中石子 ...
- Spark SQL之External DataSource外部数据源(二)源代码分析
上周Spark1.2刚公布,周末在家没事,把这个特性给了解一下,顺便分析下源代码,看一看这个特性是怎样设计及实现的. /** Spark SQL源代码分析系列文章*/ (Ps: External Da ...
- iOS 浅赋值、深复制、全然复制的知识点梳理验证(附加归档解档)
写于前: 在之前转载的一片文章中.文中对浅复制和深复制进行了具体的解读,同一时候还提到了深复制(one-level-deep copy).全然复制(true copy)的概念,并指出iOS开发中的深复 ...
- 协议分析之qq协议---qq登录
QQ 协议分析:获取各类登录会话密钥 我们知道QQ的一些会话密钥是在登录过程中生成的,尤其是Session Key,有了它便可以解密出聊天文本内容.本文主要是了解一下QQ的加密机制,首先是用嗅探工具W ...
- Lance老师UI系列教程第九课->高仿比特币监控大师
http://blog.csdn.net/lancees/article/details/22898971
- Erlang二进制模式匹配
Erlang的模式匹配用来处理二进制数据可谓是得心应手.不仅直观,而且超乎想象的简单.在C++中,处理二进制数据首先要管理缓冲区.然后再按字节进行操作,如果要处理的数据不是按字节对齐,则需要进行位移等 ...
- 使用YOURAPP做移动应用开发
一.简单介绍: YourAPP是一款执行在智能设备上的程序和模块. 它将设备底层的某些操作封装成能够供JavaScript语言调用的方式.同一时候将界面的设计和开发以Web的形式开放给使用者. 从而将 ...