编写SPU分类下拉列表的加载

编写SPU分类下拉列表的加载

准备好相应的json文件，class_1.js为一级下拉栏，class_2_*.js为二级下拉栏，它文件命名是与class_1.js内容对应的id, tm_class_1_*.js,为品牌下拉框，它文件命名是与class_1.js内容对应的id,

class_1.js

[ {
	"id" : 6,
	"flmch1" : "服装鞋帽"
}, {
	"id" : 7,
	"flmch1" : "家用电器"
}, {
	"id" : 8,
	"flmch1" : "电脑办公"
}, {
	"id" : 9,
	"flmch1" : "清洁用品"
}, {
	"id" : 10,
	"flmch1" : "母婴玩具"
}, {
	"id" : 11,
	"flmch1" : "手机数码"
}, {
	"id" : 12,
	"flmch1" : "图书音像"
}, {
	"id" : 13,
	"flmch1" : "鞋靴箱包"
}, {
	"id" : 14,
	"flmch1" : "户外钟表"
}, {
	"id" : 15,
	"flmch1" : "食品烟酒"
} ]

class_2_6.js

[ {
	"id" : 11,
	"flmch2" : "男装",
	"flbh1" : 6
}, {
	"id" : 12,
	"flmch2" : "女装",
	"flbh1" : 6
}, {
	"id" : 13,
	"flmch2" : "童装",
	"flbh1" : 6
}, {
	"id" : 21,
	"flmch2" : "内衣",
	"flbh1" : 6
}, {
	"id" : 22,
	"flmch2" : "配饰",
	"flbh1" : 6
} ]

class_2_10.js

[ {
	"id" : 42,
	"flmch2" : "奶粉",
	"flbh1" : 10
}, {
	"id" : 43,
	"flmch2" : "玩具",
	"flbh1" : 10
}, {
	"id" : 44,
	"flmch2" : "婴儿车",
	"flbh1" : 10
}, {
	"id" : 45,
	"flmch2" : "乐器",
	"flbh1" : 10
} ]

tm_class_1_6.js

[ {
	"id" : 3,
	"ppmch" : "骆驼"
}, {
	"id" : 4,
	"ppmch" : "波司登"
}, {
	"id" : 13,
	"ppmch" : "阿迪达斯"
}, {
	"id" : 14,
	"ppmch" : "耐克"
} ]

主要的功能页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page isELIgnored="false"  %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
	$(function (){
		$.getJSON("js/json/class_1.js",function(data){
			$(data).each(function(i,json){
				$("#class_1_select").append("<option value="+json.id+">"+json.flmch1+"</option>");
			});
		});
	});
	
	function get_class_2(class_1_id){
		$.getJSON("js/json/class_2_"+class_1_id+".js",function(data){
			$("#class_2_select").empty();
			$(data).each(function(i,json){
				$("#class_2_select").append("<option value="+json.id+">"+json.flmch2+"</option>");
			});
		});
		
		get_tm(class_1_id);
	}
	
	function get_tm(class_1_id){
		$.getJSON("js/json/tm_class_1_"+class_1_id+".js",function(data){
			$("#tm_select").empty();
			$(data).each(function(i,json){
				$("#tm_select").append("<option value="+json.id+">"+json.ppmch+"</option>");
			});
		});
	}
	
	function goto_spu_add(){
		var class_1_id =  $("#class_1_select").val();
		var class_2_id = $("#class_2_select").val();
		var tm_id = $("#tm_select").val();
		
		window.location.href="goto_spu_add.do?flbh1="+class_1_id+"&flbh2="+class_2_id+"&pp_id="+tm_id;
	}
</script>
<title>硅谷商城</title>
</head>
<body>
	spu商品信息管理
	<hr>
	一级：<select id="class_1_select" onchange="get_class_2(this.value);"><option>请选择</option></select>
	二级：<select  id="class_2_select"><option>请选择</option></select>
	品牌：<select  id="tm_select"><option>请选择</option></select><br>
	查询<br>
	<a href="javascript:goto_spu_add();">添加</a><br>
	删除<br>
	编辑<br>
</body>
</html>

显示效果：

编写SPU分类下拉列表的加载

猜你喜欢