Jquery select 三级联动 (需要JSON数据)
Scripts/Category.js
//Jquery三级类别联动
$(function () {
BindCategory();
})
function BindCategory() {
var $txtCategory = $("#txtCategoryId");
var _selectId = ["selBigClass", "selSmallClass", "selThreeClass"];
for (var i = 0; i < _selectId.length; i++) {
var select = document.createElement("select");
select.id = _selectId[i];
select.name = _selectId[i];
$txtCategory.parent().append(select);
}
var $selBigClass = $("#selBigClass");
var $selSmallClass = $("#selSmallClass");
var $selThreeClass = $("#selThreeClass");
$selSmallClass.hide();
$selThreeClass.hide();
$.getJSON("Scripts/CategoryJson.js", function (json) {
var html = ['<option value="">请选择大类</option>'];
for (var key in json) {
if (json[key].pid == 0) {
html.push('<option value="' + json[key].id + '">' + json[key].name + '</option>');
}
}
//第一级类别
$selBigClass.empty().append(html.join('')).change(function () {
$txtCategory.val(this.value);
$selThreeClass.hide();
$selSmallClass.show();
var html = ['<option value="">请选择小类</option>'];
for (var data in json) {
if (json[data].pid == $("#selBigClass").val()) {
html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');
}
}
//第二级类别
$selSmallClass.empty().append(html.join('')).change(function () {
$txtCategory.val(this.value);
$selThreeClass.show();
var html = ['<option value="">请选择小类</option>'];
for (var data in json) {
if (json[data].pid == $selSmallClass.val()) {
html.push('<option value="' + json[data].id + '">' + json[data].name + '</option>');
}
}
//第三级类别
$selThreeClass.empty().append(html.join('')).change(function () {
$txtCategory.val(this.value);
});
//如果不存在第三级类别则隐藏第三级类别控件
if ($selThreeClass.get(0).options.length <= 1) {
$selThreeClass.hide();
return false;
}
});
//如果不存在第二级类别则隐藏第二级类别控件
if ($selSmallClass.get(0).options.length <= 1) {
$selSmallClass.hide();
return false;
} });
});
};
Scripts/CategoryJson.js（如何生成json数据详见：http://www.cnblogs.com/haozhenjie819/p/3601676.html）
[{ "id": 31, "name": "\u65b0\u95fb\u4e2d\u5fc3", "pid": 0, "itemvalue": "|0|" },
{ "id": 59, "name": "\u52a0\u76df\u5408\u4f5c", "pid": 0, "itemvalue": "|0|" },
{ "id": 65, "name": "\u4ea7\u54c1\u670d\u52a1", "pid": 0, "itemvalue": "|0|" },
{ "id": 60, "name": "\u52a0\u76df\u987b\u77e5", "pid": 59, "itemvalue": "|0|59|" },
{ "id": 61, "name": "\u52a0\u76df\u6d41\u7a0b", "pid": 59, "itemvalue": "|0|59|" },
{ "id": 62, "name": "\u52a0\u76df\u533a\u57df", "pid": 59, "itemvalue": "|0|59|" },
{ "id": 70, "name": "\u63a8\u8350\u670d\u52a1", "pid": 65, "itemvalue": "|0|65|" },
{ "id": 71, "name": "\u8ba1\u8d39\u65b9\u5f0f", "pid": 65, "itemvalue": "|0|65|" },
{ "id": 72, "name": "\u7528\u6237\u987b\u77e5", "pid": 65, "itemvalue": "|0|65|" },
{ "id": 73, "name": "\u7981\u5bc4\u8303\u56f4", "pid": 65, "itemvalue": "|0|65|" },
{ "id": 75, "name": "\u666e\u901a\u5feb\u9012", "pid": 70, "itemvalue": "|0|65|70|" },
{ "id": 76, "name": "\u7279\u79cd\u5feb\u4ef6", "pid": 70, "itemvalue": "|0|65|70|" },
{ "id": 77, "name": "\u9650\u65f6\u6d3e\u9001", "pid": 70, "itemvalue": "|0|65|70|" },
{ "id": 78, "name": "\u4ee3\u6536\u8d37\u6b3e", "pid": 70, "itemvalue": "|0|65|70|" },
{ "id": 79, "name": "\u4fdd\u4ef7\u670d\u52a1", "pid": 70, "itemvalue": "|0|65|70|" },
{ "id": 80, "name": "\u4ee3\u7b7e\u56de\u5355", "pid": 70, "itemvalue": "|0|65|70|"}]
html页面
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>三级联动</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/Category.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td >新闻类别：</td>
<td > <input id="txtCategoryId" name="txtCategoryId" type="hidden" runat="server" /></td>
</tr>
</table>
</form>
</body>
</html>
效果图
知识点：1、Jquery获取select中option个数
$("#selSmallClass").get(0).options.length
Jquery select 三级联动 (需要JSON数据)的更多相关文章
- jquery select三级联动
需求:对地区进行选择,选择相应的省,就会出现相应范围的市,然后出现相应的范围的县区:如果县不存在,就不现实,自我要求是自己写个简单的插件,方便以后调用: 逻辑:1.通过div的类名来获取,其下的sel ...
- 将省市县三级联动的json数据，转化为element-ui能用的格式，并使用
var options=[]; var cities = { '北京': { '北京': ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区 ...
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
- jQuery实现select三级联动
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- jquery省市区三级联动
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
随机推荐
- ASP.NET请求过程-基本过程
客户端发送请求到达服务器 输入域名->DNS解析->指定IP 服务器(如果网页直接输入IP地址则直接到服务器)->请求到达服务器->HTTP.SYS接受HTTP请求->转 ...
- BBC这10部国宝级纪录片，让孩子看遍世间最美的地方
https://weibo.com/ttarticle/p/show?id=2309404382383649486138#related
- CentOS7.0 yum安装 docker
一.安装docker 1.Docker 要求 CentOS 系统的内核版本高于 3.10 ,查看本页面的前提条件来验证你的CentOS 版本是否支持 Docker . root 用户登录操作! 通过 ...
- PAT甲级 散列题_C++题解
散列 PAT (Advanced Level) Practice 散列题 目录 <算法笔记> 重点摘要 1002 A+B for Polynomials (25) 1009 Product ...
- Echarts API说明文档
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 ...
- list列表
list列表 list:一个有序的集合 创建列表 语法格式: 列表名 = [元素1, 元素2, 元素3…….,元素n] 注:列表中的元素⽤逗号隔开. 注:列表⾥⾯的元素可以是不同类型的数据. 列表元素 ...
- Python--读取数据库
原文地址:https://www.wukong.com/answer/6591280609824342286/?iid=40708017633&app=news_article&sha ...
- java. util. concurrent. atomic
一.原子更新基本类型 AtomicInteger AtomicBoolean AtomicLong 二.原子更新数组 AtomicIntegerArray AtomicLongArray Atomic ...
- 使用DANT做FTP的转发代理
FTP不能直接使用nginx进行转发,想了一些办法,最后决定使用iptalbes做DNAT,相关于把这个机器做一台防火墙,做一个NAT 1.启用ip_forward vim /etc/sysctl.c ...
- （三）springmvc之注解的基本使用
一.@Controller @Controller 标记一个类是Controller 二.RequestMapping 地址映射 2.1 Value的操作. 注解在类上面 (父) ...