3维数组问题,不答也可以看看的一个问题。

山茶树和葡萄树 2015-09-16 10:34:41

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select class="J_Grade">
<option value="0">年级</option>
</select>
<select class="J_Semester">
<option value="0">学期</option>
</select>
<select class="J_Class">
<option value="0">班级</option>
</select>
<input id="J_Count" type="text" placeholder="人数" />
<input id="J_ClassID" type="text" placeholder="班级ID" />
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>






//联动获取人班级数。
//通过 班级ID 获取具体的 年级 学期 班级。

var data = [
{
'id': 3, 'name': '大学', 'child': [
{
'id': 33, 'name': '大三', 'child': [
{ 'id': 331, 'name': '大三(1)', 'count': '50' },
{ 'id': 332, 'name': '大三(2)', 'count': '50' },
{ 'id': 333, 'name': '大三(3)', 'count': '50' }]
},
{
'id': 32, 'name': '大二', 'child': [
{ 'id': 321, 'name': '大二(1)', 'count': '50' },
{ 'id': 322, 'name': '大二(2)', 'count': '50' },
{ 'id': 323, 'name': '大二(3)', 'count': '50' }]
},
{
'id': 31, 'name': '大一', 'child': [
{ 'id': 311, 'name': '大一(1)', 'count': '50' },
{ 'id': 312, 'name': '大一(2)', 'count': '50' },
{ 'id': 313, 'name': '大一(3)', 'count': '50' }]
}
]
},
{
'id': 2, 'name': '高中', 'child': [
{
'id': 23, 'name': '高三', 'child': [
{ 'id': 231, 'name': '高三(1)', 'count': '50' },
{ 'id': 232, 'name': '高三(2)', 'count': '50' },
{ 'id': 233, 'name': '高三(3)', 'count': '50' }]
},
{
'id': 22, 'name': '高二', 'child': [
{ 'id': 221, 'name': '高二(1)', 'count': '50' },
{ 'id': 222, 'name': '高二(2)', 'count': '50' },
{ 'id': 223, 'name': '高二(3)', 'count': '50' }]
},
{
'id': 21, 'name': '高一', 'child': [
{ 'id': 211, 'name': '高一(1)', 'count': '50' },
{ 'id': 212, 'name': '高一(2)', 'count': '50' },
{ 'id': 213, 'name': '高一(3)', 'count': '50' }]
}
]
},
{
'id': 1, 'name': '初中', 'child': [
{
'id': 13, 'name': '初三', 'child': [
{ 'id': 131, 'name': '初三(1)', 'count': '50' },
{ 'id': 132, 'name': '初三(2)', 'count': '50' },
{ 'id': 133, 'name': '初三(3)', 'count': '50' }]
},
{
'id': 12, 'name': '初二', 'child': [
{ 'id': 121, 'name': '初二(1)', 'count': '50' },
{ 'id': 122, 'name': '初二(2)', 'count': '50' },
{ 'id': 123, 'name': '初二(3)', 'count': '50' }]
},
{
'id': 11, 'name': '初一', 'child': [
{ 'id': 111, 'name': '初一(1)', 'count': '50' },
{ 'id': 112, 'name': '初一(2)', 'count': '50' },
{ 'id': 113, 'name': '初一(3)', 'count': '50' }]
}
]
}
];




...全文
275 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
cdmsan 2015-09-17
  • 打赏
  • 举报
回复


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select class="J_Grade" id="J_Grade">
        <option value="0">年级</option>
    </select>
    <select class="J_Semester" id="J_Semester">
        <option value="0">学期</option>
    </select>
    <select class="J_Class" id="J_Class">
        <option value="0">班级</option>
    </select>
    <input id="J_Count" type="text" placeholder="人数" />
    <input id="J_ClassID" type="text" placeholder="班级ID" />   
    <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
	<script>
	var data = [
   {
       'id': 3, 'name': '大学', 'child': [
           {
               'id': 33, 'name': '大三', 'child': [
                           { 'id': 331, 'name': '大三(1)', 'count': '50' },
                           { 'id': 332, 'name': '大三(2)', 'count': '50' },
                           { 'id': 333, 'name': '大三(3)', 'count': '50' }]
           },
            {
                'id': 32, 'name': '大二', 'child': [
                    { 'id': 321, 'name': '大二(1)', 'count': '50' },
                    { 'id': 322, 'name': '大二(2)', 'count': '50' },
                    { 'id': 323, 'name': '大二(3)', 'count': '50' }]
            },
            {
                'id': 31, 'name': '大一', 'child': [
                    { 'id': 311, 'name': '大一(1)', 'count': '50' },
                    { 'id': 312, 'name': '大一(2)', 'count': '50' },
                    { 'id': 313, 'name': '大一(3)', 'count': '50' }]
            }
       ]
   },
   {
       'id': 2, 'name': '高中', 'child': [
           {
               'id': 23, 'name': '高三', 'child': [
                           { 'id': 231, 'name': '高三(1)', 'count': '50' },
                           { 'id': 232, 'name': '高三(2)', 'count': '50' },
                           { 'id': 233, 'name': '高三(3)', 'count': '50' }]
           },
            {
                'id': 22, 'name': '高二', 'child': [
                    { 'id': 221, 'name': '高二(1)', 'count': '50' },
                    { 'id': 222, 'name': '高二(2)', 'count': '50' },
                    { 'id': 223, 'name': '高二(3)', 'count': '50' }]
            },
            {
                'id': 21, 'name': '高一', 'child': [
                    { 'id': 211, 'name': '高一(1)', 'count': '50' },
                    { 'id': 212, 'name': '高一(2)', 'count': '50' },
                    { 'id': 213, 'name': '高一(3)', 'count': '50' }]
            }
       ]
   },
   {
       'id': 1, 'name': '初中', 'child': [
           {
               'id': 13, 'name': '初三', 'child': [
                           { 'id': 131, 'name': '初三(1)', 'count': '50' },
                           { 'id': 132, 'name': '初三(2)', 'count': '50' },
                           { 'id': 133, 'name': '初三(3)', 'count': '50' }]
           },
            {
                'id': 12, 'name': '初二', 'child': [
                    { 'id': 121, 'name': '初二(1)', 'count': '50' },
                    { 'id': 122, 'name': '初二(2)', 'count': '50' },
                    { 'id': 123, 'name': '初二(3)', 'count': '50' }]
            },
            {
                'id': 11, 'name': '初一', 'child': [
                    { 'id': 111, 'name': '初一(1)', 'count': '50' },
                    { 'id': 112, 'name': '初一(2)', 'count': '50' },
                    { 'id': 113, 'name': '初一(3)', 'count': '50' }]
            }
       ]
   }
];

$(function(){
	
	var J_Grade = $("#J_Grade");
	var J_Semester = $("#J_Semester");
	var J_Class = $("#J_Class");
	var J_Count = $("#J_Count");
	var J_ClassID = $("#J_ClassID");

	var option = '<option value="0">年级</option>';
	for(var k in data){
		option += '<option value="'+data[k]['id']+'">'+data[k]['name']+'</option>';
	}
	J_Grade.empty();
	$(option).appendTo(J_Grade);
	J_Grade.change(function(){
		initSemester();
		initClass();
		setSemester($(this).val());
	});
	J_ClassID.blur(function(){
		var val = $(this).val();
		var GradeID = 0,SemesterID = 0,ClassID = 0;
		for(var k in data){
			Grade = data[k]['id'];
			var child = data[k]['child'];
			for(var s in child){
				SemesterID = child[s]['id'];
				var _child = child[s]['child'];
				for(var ss in _child){
					if(_child[ss]['id'] == val){
						ClassID = _child[ss]['id'];
						J_Grade.find("option[value="+Grade+"]").attr("selected",true);
						J_Grade.change();
						J_Semester.find("option[value="+SemesterID+"]").attr("selected",true);
						J_Semester.change();
						J_Class.find("option[value="+ClassID+"]").attr("selected",true);
						J_Class.change();
					}
				}
			}
		}
	});


	function setSemester(GradeID){
		var option = '<option value="0">学期</option>';
		for(var k in data){
			if(data[k]['id'] == GradeID){
				var child = data[k]['child'];
				for(var s in child){
					option += '<option value="'+child[s]['id']+'" data-gid="'+GradeID+'">'+child[s]['name']+'</option>';
				}
			}
		}
		J_Semester.empty();
		$(option).appendTo(J_Semester);
		J_Semester.change(function(){
			initClass();
			var option = J_Semester.find("option:selected");
			setClass(option.attr("data-gid"),$(this).val());
		})
	}

	function setClass(GradeID,SemesterID){
		var option = '<option value="0">班级</option>';
		for(var k in data){
			if(data[k]['id'] == GradeID){
				var child = data[k]['child'];
				for(var s in child){
					if(child[s]['id'] == SemesterID){
						var _child = child[s]['child'];
						for(var ss in _child){
							option += '<option value="'+_child[ss]['id']+'" data-count="'+_child[ss]['count']+'" data-sid="'+SemesterID+'" data-gid="'+GradeID+'">'+_child[ss]['name']+'</option>';
						}
					}
				}
			}
		}
		J_Class.empty();
		$(option).appendTo(J_Class);
		J_Class.change(function(){
			var option = J_Class.find("option:selected");
			J_Count.val(option.attr("data-count"));
			J_ClassID.val($(this).val());
		})
	}

	function initSemester(){
		J_Semester.empty();
		$('<option value="0">学期</option>').appendTo(J_Semester);
	}

	function initClass(){
		J_Class.empty();
		$('<option value="0">班级</option>').appendTo(J_Class);
	}
});

	
	</script>

</body>
</html>
  • 打赏
  • 举报
回复
引用 1 楼 DaveLeeCN 的回复:
要么全用array,要么就用json,这样嵌套着用累不
这就是JSON数据,只是为了方便大神们解答,就提了出来。
似梦飞花 2015-09-17
  • 打赏
  • 举报
回复
看什么啊 遍历数组试试
DaveLeeCN 2015-09-17
  • 打赏
  • 举报
回复
要么全用array,要么就用json,这样嵌套着用累不

87,907

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧