Jquery 联动取值的有关问题_J2EE

Jquery 联动取值的问题
quotes.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/base.js"></script>

</head>
<body>
	<br>
	<br>
	<br>
	<table align="center" border="1" width="80%" cellpadding="0" cellspacing="0">
		<tbody style="font-size: 20px;">
			<tr align="center">
				<td colspan="3" style="font-size: 28px;"></td>
			</tr>
			<tr>
				<td width="30%">请选择材质</td>
				<td><c:if test="${not empty materialList }">
						<select id="material">
							<option value="">----请选择----</option>
							<c:forEach items="${materialList}" var="u">
								<option id="id" value="${u.m_id }">${u.m_id }、${u.material}</option>
							</c:forEach>
						</select>
						<c:forEach items="${materialList}" var="u">
							<input id="${u.m_id }" value="${u.price }" type="hidden"></input>
						</c:forEach>
					</c:if></td>
				<td width="30%"><div id="pricediv"></div></td>
			</tr>
			<tr>
				<td>请选择产品类别</td>
				<td><select id="category">
						<option value="">----请选择----</option>
				</select></td>
				<td width="30%"><div id="categoryfee"></div></td>
			</tr>
			<tr>
				<td>请选择包装方式</td>
				<td><select id="package">
						<option value="">----请选择----</option>
				</select></td>
				<td></td>
			</tr>
			<tr>
				<td>请选择表处理</td>
				<td><select id="surface">
						<option value="">----请选择----</option>
				</select></td>
				<td></td>
			</tr>
			<tr>
				<td colspan="2">总价</td>
				<td></td>
			</tr>
		</tbody>
	</table>

</body>
</html>

base.jsp

$(function() {
	$("#material").change(
			function() {
				var m_id = $("#material").val();
				var price = $("#" + m_id).val();
				$("#pricediv").html(price);

				// Category
				$.get("CategoryServlet", {
					"mid" : m_id,
					"time" : new Date().getTime()
				}, function(data, textstatu) {
					var categorySelect = $("#category");
					categorySelect.empty();
					var firstoption = $("<option>").text("---请选择---").val("");
					categorySelect.append(firstoption);
					for (var i = 0; i < data.length; i++) {
						var option = $("<option>").text(data[i].category).val(
								data[i].c_id);
						categorySelect.append(option);
					}
				}, "json");

				// Package
				$.get("PackageServlet", {
					"mid" : m_id,
					"time" : new Date().getTime()
				}, function(data, textstatu) {
					var categorySelect = $("#package");
					categorySelect.empty();
					var firstoption = $("<option>").text("---请选择---").val("");
					categorySelect.append(firstoption);
					for (var i = 0; i < data.length; i++) {
						var option = $("<option>").text(data[i].packaging).val(
								data[i].p_id);
						categorySelect.append(option);
					}
				}, "json");

				// Surface
				$.get("SurfaceServlet", {
					"mid" : m_id,
					"time" : new Date().getTime()
				}, function(data, textstatu) {
					var categorySelect = $("#surface");
					categorySelect.empty();
					var firstoption = $("<option>").text("---请选择---").val("");
					categorySelect.append(firstoption);
					for (var i = 0; i < data.length; i++) {
						var option = $("<option>").text(data[i].surface).val(
								data[i].p_id);
						categorySelect.append(option);
					}
				}, "json");
			});
	// 取category的值，然后放到<div>中
	$("#category").change(function() {

		var c_id = $("#category").val();
		var c_fee = $("#" + c_id).val();

		$("#categoryfee").text(c_fee);
		alert(c_id);
	});
})

问题：为什么Category的select中<div>取到的值还是Material中的值，get中已经取到值了，并且是正确的值，请问这是怎麽回事！！！！

[{"c_id":1,"category":"焊接直通","fee":300,"m_id":1},{"c_id":2,"category":"非焊接直通","fee":400,"m_id":1},{"c_id":3,"category":"弯通","fee":500,"m_id":1},{"c_id":4,"category":"附配件","fee":500,"m_id":1},{"c_id":5,"category":"焊接支架","fee":500,"m_id":1},{"c_id":6,"category":"非焊接支架（钻孔）","fee":500,"m_id":1},{"c_id":7,"category":"非焊接支架（不钻孔）","fee":300,"m_id":1},{"c_id":8,"category":"竖井","fee":800,"m_id":1}]

------解决思路----------------------
JQUERY不是有一个开源的联动库吗？为什么非要自己写一个呢？

你可以用Chrome开发者模式来单步调试JS，这样很快就能找出问题了。