根据参数显示类别(三级联动,需要JSON数据)
根据参数显示类别(三级联动,需要JSON数据)
Scripts/Category.js
调用方法:
$(function () {
BindCategory();
//默认绑定文本框中的值
BindCategoryData($("#txtCategoryId").val());
})
View Code
绑定三级联动(详情见:http://www.cnblogs.com/haozhenjie819/p/3887279.html)
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;
}
});
});
};
View Code
根据参数显示默认值
var setBigClassTime;
//绑定数据
function BindCategoryData(CategoryId) {
if (document.getElementById("selBigClass") == null || document.getElementById("selBigClass").length <= 0)
setBigClassTime = setTimeout("BindCategoryData('" + CategoryId + "')", 200);
else
clearTimeout(setBigClassTime);
$.getJSON('/Scripts/CategoryJson.js', function (json) {
for (var key in json) {
if (json[key].id == CategoryId) {
json[key].id = CategoryId;
var str = json[key].itemvalue;
var _p = str.split("|")[2];
var _c = json[key].pid;
if (_p == _c) {
if (_p != "") {
$("#selBigClass").val(_p).change();
$("#selSmallClass").val(CategoryId);
}
else {
$("#selBigClass").val(CategoryId);
}
}
else {
$("#selBigClass").val(_p).change();
$("#selSmallClass").val(_c).change();
$("#selThreeClass").val(CategoryId).change();
}
}
}
});
}
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|"}]
View Code
web页面(给hidden赋值,类别编号为75)
<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" value="75" /></td>
</tr>
</table>
</form>
</body>
</html>
效果图
涉及的知识点:【JavaScript split() 方法】返回值是一个字符串数组。
转载于:https://www.cnblogs.com/taofx/p/4140009.html
根据参数显示类别(三级联动,需要JSON数据)相关推荐
- 返回三级联动的JSON数据
如下,我们要返回下面的数据格式 {"value": "3","label": "安徽省","children& ...
- 城市三级联动的json文件
[{"code" : "110000","name" : "北京市","children" : [{ ...
- html表格接收json数据,Bootstrap-table如何显示后台传过来的JSON数据?
大致懂了--可能是对JS不太了解吧,没有返回object,下面是成功代码: $(function () { //初始化Table var teacherTable = new TableInit(); ...
- php3级分类,关于php非递归三级分类输出json数据
** 有以下数据结构表 ** ** 需要输出json格式为: ** pickerValueArray: [ {label: 'phone',value: 0,children: [ { label: ...
- 省市区三级联动 数据库取数据js代码
//页面部分代码 <div class="mui-input-row"> <label class="txt2">丢失地点</la ...
- element-ui省市区三级联动:选择即改变
element-ui 省市区三级联动:选择即改变 注意: 阅读本文,经验传授: vue.js单组件引入外部或自定义的 .js文件,并调用文件内三级联动的 json数据: 自定义设置 默认地址,结合js ...
- python三级联动_ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- [Ajax] jQuery中的Ajax -- 02-jQuery中的三级联动
案例 jQuery的三级联动 server2.json代码展示 [{"province": "吉林省","cities": [{" ...
- vue实现省市区三级联动地址选择
导航 利用select下拉框实现 CV通道 省市区三级json 凑字数 之前由于产品需求,自己去实现了省市区三级联动的选择,但是总感觉有所欠缺,后来花了一点时间整理,特此分享下我的思路,望大佬们指教. ...
最新文章
- CF338D GCD Table(拓展中国剩余定理,细节处理,2900分)
- 更新 hadoop eclipse 插件
- Oracle-一个中文汉字占几个字节?
- es6 Promise,生成器函数,async
- Selenium自动化测试-浏览器基本操作
- 作为 SaaS 初创公司产品负责人,我学到了 5 条经验教训!
- 使用 ADO 向数据库中存储一张图片
- 普通摄像头的数据输出格式YUV与mjpeg之间联系、DCT离散余弦变换去噪跟压缩(待补充)
- python:查看某个数字类型的信息,比如最大有效值
- java音乐登陆界面_onlinemusic java在线音乐平台,实现了基本的注册登录功能,有界面,对 的初学者有帮助 Jsp/Servlet 238万源代码下载- www.pudn.com...
- ssm 订单功能实现
- 计算机专业研究生和本科生工资差距,本科生和研究生的工资差距,到底有多大?...
- CSS基础-09-布局(定位 position、浮动float,元素对其、图像对其、文本对齐、元素内内容对齐,元素堆叠)
- c语言流水灯程序详细讲解,用c语言编写单片机流水灯程序详解
- java jdbc 批量更新_java – JDBC PreparedStatement,批量更新和生成的密钥
- 台式计算机操作系统的安装方法,台式机电脑重装win10系统详细教程
- soul显示服务器异常,soul聊天状态异常 消息发送失败
- 仿天猫 购物车(Android studio 仿天猫 详情页面 添加购物车选择 颜色 尺寸demo)
- 大师们怎么养家糊口过日子
- Three.js - 使用 bumpMap 凹凸贴图创建皱纹