习课省市区的三级联动(cxselect的使用)
1,api:
http://www.jq22.com/jquery-info3238
2,demo:
http://blog.csdn.net/luo201227/article/details/38844175
3,自己写的:
jsp页面:
<!-- 引入js -->
<script type='text/javascript' src='${ctx}/js/core/jquery-1.7.2.min.js'></script>
<script src="${ctx }/js/com/jquery.cxselect.js"></script>
<script type="text/javascript">
$(function () {
//插件初始化地址 数据源地址
$.cxSelect.defaults.url = '${ctx }/js/com/cityData.min.json';
// 设置默认值及选项标题
$('#schoolarea').cxSelect({
selects: ['province', 'city', 'area'],
emptyStyle: 'none'
});
$('#educationarea').cxSelect({
selects: ['province2', 'city2', 'area2'],
emptyStyle: 'none'
});
}); </script> <ul class="back_rigth_inquire"> <li class="content_top margin_t_20">
<%--<div class="name_standard">--%>
<%--<span class="left_word">所在学校<i></i></span>--%>
<%--<select id="province" name="province3" class="province" data-value="" onchange="getschoollist();"></select>--%>
<%--<select id="city" name="city3" class="city" data-value="" onchange="getschoollist();"></select>--%>
<%--<select id="area" name="area3" class="area" data-value="" onchange="getschoollist();"></select>--%>
<%--<select id="schoolCode" name="scode" onchange="getsemesterlist()"><option value="">请选择学校</option></select>--%>
<%--</div>--%>
<div id="schoolarea">
<span class="left_word">所在学校 <i></i></span>
<select id="province" name="province3" class="province" data-value="" onchange="getschoollist();"></select>
<select id="city" name="city3" class="city" data-value="" onchange="getschoollist();"></select>
<select id="area" name="area3" class="area" data-value="" onchange="getschoollist();"></select>
<select id="schoolCode" name="scode" onchange="getsemesterlist()"><option value="">请选择学校</option></select>
</div>
</li>
<li>
<div id="educationarea">
<span class="left_word">所在教育局<i></i></span>
<select id="province2" name="province3" class="province2" data-value="" onchange="getEducationBureaulist();"></select>
<select id="city2" name="city3" class="city2" data-value="" onchange="getEducationBureaulist();"></select>
<select id="area2" name="area3" class="area2" data-value="" onchange="getEducationBureaulist();"></select>
<select id="code" name="scode" onchange="getsemesterlist()"><option value="">请选择教育局</option></select>
</div>
</li>
<br>
<%--<li class="content_top margin_t_20">--%>
<%--<div class="name_standard">--%>
<%--<span class="left_word">所在教育局<i></i></span>--%>
<%--<select id="province2" name="province3" class="province" data-value="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="city2" name="city3" class="city" data-value="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="area2" name="area3" class="area" data-value="" onchange="getEducationBureaulist();"></select>--%>
<%--<select id="code" name="scode" onchange="getsemesterlist()"><option value="">请选择教育局</option></select>--%>
<%--</div>--%>
<%--</li>--%> <p class="back_rigth_inquire_button">
<a class="button_query_view" onclick="queryBySchoolCode()">查询</a>
<a class="button_query_reset" onclick="resetSchoolCode()">重置</a>
</p>
</ul>
json数据 (cityData.min.json):
习课省市区的三级联动(cxselect的使用)的更多相关文章
- 省市区(县)三级联动代码(js 数据源)
ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...
- js之省市区(县)三级联动效果
省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...
- 中国省市区地址三级联动jQuery插件 案例下载
中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...
- JQuery实现省市区的三级联动
JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...
- JavaScript实现省市区的三级联动
JavaScript实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &qu ...
- 中国省市区地址三级联动插件---jQuery Distpicker
插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...
- 省市区js三级联动(原创)
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
- 用php和ajax写一个省市区的三级联动,实现地区的下拉选择
要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...
- 省市区地址三级联动jQuery插件Distpicker使用
插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...
随机推荐
- Java异常简介
异常指异于常态,和正常情况不一样,有错误出现.阻止当前方法或作用域执行的问题,称之为异常. Java中所有的与异常有关的类都继承于Throwable类,Throwable类有两个儿子,一个是Error ...
- python基础篇
python脚本开头 #!/usr/bin/env python# -*- coding: utf-8 -*print "你好,世界" 不要问为什么,记住就好了 变量定于的规则 变 ...
- JTree使用
package JTree; import java.awt.Component; import javax.swing.Icon; import javax.swing.JTree; import ...
- golang,liteide设置 windows7(64)
1.安转go的环境,exe安装包 2.下载liteide27.2.1 3.打开liteide开始开发,在里面添加gopath,无法读取windows里面的gopath设置,不知道什么原因,以管理员运行 ...
- SSH框架简化(struts2+spring+hibernate)
目的: 通过对ssh框架有了基础性的学习,本文主要是使用注解的方式来简化ssh框架的代码编写. 注意事项: 1.运行环境:Windows 8-64位,Eclipse(开发工具),jdk1.8.0_91 ...
- linux yum命令详解-转
yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...
- DevWebForm控件,触发用客户端事件
ClientInstanceName+".Raise"+"事件名", 例如: ClientInstanceName.RaiseValueChanged();
- MaskEdit 使用方法
它有一个 MaskEdit 属性(注意,属性) 打开后有一个 Input Mask 编辑框 格式符意义 L 允许输入英文字母,且一定要输入 l 允许输入 ...
- iOS10 权限配置
升到iOS10之后,需要设置权限的有: 麦克风权限:Privacy - Microphone Usage Description 是否允许此App使用你的麦克风? 相机权限: Privacy - Ca ...
- Linux centos 下 安装eclipse c++
之前在centos6.3版本使用eclipes一切都很正常.最近centos版本升级到6.7后,使用eclipse c++到时候,打开文件,就异常退出了.在网上搜了很久,终于找到解决方法: 现象描述: ...