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 ...
随机推荐
- javacript中apply和call的区别
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. 接受的参数是一个字符串. call:和apply的意思一样,只不过是参数列表不一样. 接收的参数是一个数组. 例如: <s ...
- git 忽略文件的三种方式
1. 在项目目录下新建.gitignore文件并添加规则 特点:此种方式的忽略规则只局限于本项目目录及其子目录,并且.gitignore文件会被提交到远程仓库进行共享忽略规则. 2. 在.git/in ...
- 网页编程-Djiango(二)
一.初始Ajax ajax的写法: $.ajax({ url:'/host', type:'POST' data:{'k1':123,'k2':'root'} success:function(dat ...
- Linux面试必问-对照目录内容的命令“Diff”具体解释
dir1下有个log_1.log dir2下有个log_2.log 两个文件例如以下: p_ylwu@VM_194_111_sles10_64:/home/jdxochen/exercise> ...
- kubernetes调度之 PriorityClass
系列目录 kubernetes支持多种资源调度模式,前面讲过简单的基于nodeName和nodeSelector的服务器资源调度,我们称之为用户绑定策略,下面简要描述基于PriorityClass的同 ...
- qemu-kvm编译错误
今天编译了下qemu-kvm,死活编不过,错误信息如下: CC block/qcow2-snapshot.oIn file included from ./qemu-common.h:6:0, ...
- linux 中添加自己的库路径的方法 cannot open shared object file: No such file or directory
本文转自:http://blog.csdn.net/maotianwang/article/details/44619197 库文档在连接(静态库和共享库)和运行(仅限于使用共享库的程式)时被使用,其 ...
- Windows10搭建FTP服务器
配置FTP服务器步骤: 第一步: 打开控制面板--->选择程序--->启动或关闭Windows功能--->勾选FTP服务器等.如下图: 第二步: 右键此电脑--->点击管理-- ...
- Javascript - ERR_CONTENT_LENGTH_MISMATCH
不知道做了什么,有两天没有跑vue项目啦,今天突然出现加载脚本的时候出现 ERR_CONTENT_LENGTH_MISMATCH这个错误, 所以我去搜索了一下 找到如下答案 http://stac ...
- Machine Learning in Action(1) K-近邻
机器学习分两大类,有监督学习(supervised learning)和无监督学习(unsupervised learning).有监督学习又可分两类:分类(classification.)和回归(r ...