<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
加上缓存之后的完整jQuery代码如下程序清单。
程序清单2.0：chainSelect.js
/**
* 级联下拉框效果
*/$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
carnameSelect.change(function(){
var carname = carnameSelect.val();
if(carname != "") {
if (!carnameSelect.data(carname)) {
//汽车厂商不为空发起ajax请求
$.post("../chainSelect", {keyword: carname, type : "top"}, function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect);
}
$(".cartype").show();
carnameSelect.next("img").show();
}
//将data放入缓存
carnameSelect.data(carname, data);
}, "json");
} else {
//从缓存中取出数据
var data = carnameSelect.data(carname);
if(data != null && data.length != 0) {
//清除上一次change的内容
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
for(var i = 0; i < data.length; i++) {
$("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(cartypeSelect);
}
$(".cartype").show();
carnameSelect.next("img").show();
}
}
} else {
//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
$(".cartype").hide();
$(".wheeltype").hide();
$(".carimage").hide();
$(this).next("img").hide();
}
});
cartypeSelect.change(function(){
var cartype = cartypeSelect.val();
if(cartype != "") {
if(!cartypeSelect.data(cartype)) {
//汽车类型不为空发起ajax请求
$.post("../chainSelect", {keyword: cartype, type : "sub"}, function(data){
if(data != null && data.length != 0) {
//清除上一次change的内容
wheeltypeSelect.html("");
$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
for(var i = 0; i < data.length; i++) {
$("<option value='"+data[i]+"'>"+data[i]+"</option>").appendTo(wheeltypeSelect);
}
$(".wheeltype").show();
cartypeSelect.next("img").show();
}
cartypeSelect.data(cartype, data);
}, "json");
