jquery实战-级联下拉框

2. 级联下拉框

chainselect.html

<html>
<head>
<title>级联下拉框</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
<link type=”text/css” rel=”stylesheet” href=”css/chainselect.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/ chainselect.js”></script>
</head>
<body>
<div class=”loading”>
    <p><img src=”imags/data-loading.gif” alt=”数据转载中” /></p>
    <p>数据转载中……</p>
</div>
<div class=”car”>
    <span class=”carname”>
    汽车厂商：
    <select>
        <option value=”” selected=”selected”>请选择汽车厂商</option>
        <option value=”BMW”>宝马</option>
        <option value=”Audi >奥迪</option>
        <option value=”VM >大众</option>
    </select>
    <img src=images/pfeil.gif” alt=”有数据” />
    </span>
    <span class=”cartype”>
    汽车类型：
    <select></select>
    <img src=”images/pfeil.gif” alt=”有数据” />
    </span>
    <span class=”whelltype”>
    车轮类型：
    <select></select>
    </span>
</div>
<div class=”carimage”>
   <p> <img src=”images/img-loading.gif” alt=”图片装载中” class=”carloading” /></p>
   <p> <img src=”” alt=”汽车图片” class=”carimg”/></p>
</div>

</body>
</html>

chainselect.css

.loading {
width: 400px;
//margin-left: auto;
//margin-right:auto;
margin: 0 auto;
visibility: hidden;
}
.loading p {
    text-align: center;
}
p {
    margin: 0;
}
.car {
width: 500px;
margin: 0 atuo;
text-align: center;
}
.carimage {
    text-align: center;
}
.cartype , .wheeltype , .carloading, .carimg, .car img {
    display: none;
}

chainselect.js

$(document).ready(function() {
//找到三个下拉框
var carnameSelect = $(“.carname”).children(“select”);
var cartypeSelect + $(“.cartype”).children(“select”);
var wheeltypeSelect = $(“.whelltype”).children(“select”);
var carimg = $(“.carimg”);
//给三个下拉框注册事件
carnameSelect.change(function(){
    //1. 需要获得当前下拉框的值
    var carnameValue = $(this).val():
    wheeltypeSelect.parent().hide();
    carimg.hide().attr(“src”,””);
    //2. 如果值不为空，则将下拉框的值传送给服务器
    if(carnameValue != “”) {
        if(!carnameSelect.data(carnameValue)) {
        $.post(“ChainSelect”,{keyward: carnameValue,type: top}, function(data){
//2.1 接收服务器返回的汽车类型
            if(data.length != 0) {
//2.2 解析汽车类型的数据，填充到汽车类型下拉框中
    cartypeSelect.html(“”);
    $(“<option value=’’>请选择汽车类型</option>”).appendTo(cartypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”).appendTo(cartypeSelect);
          cartypeSelect.parent().show();  //汽车类型的下拉框显示出
          carnameSelect.next().show();   //第一个下拉框后面的指示图片显示出来
        }
} else {
                //2.3 没有任何汽车类型的数据
                cartypeSelect.parent().hide();
                carnameSelect.next().hide();
            }
            carnameSelect.data(carnameValue, data);
}, ”json”)
        } else {
            var data = cartypeSelect.data(carnameValue);
            if(data.length != 0) {
    cartypeSelect.html(“”);
    $(“<option value=’’>请选择汽车类型</option>”).appendTo(cartypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”).appendTo(cartypeSelect);
          cartypeSelect.parent().show();  //汽车类型的下拉框显示出
          carnameSelect.next().show();   //第一个下拉框后面的指示图片显示出来
        }
} else {
                //2.3 没有任何汽车类型的数据
                cartypeSelect.parent().hide();
                carnameSelect.next().hide();
            }

        }
    } else {
    //3. 如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
    cartypeSelect.parent().hide();
    carnameSelect.next().hide();
    }
});
cartypeSelect.change(function(){
//1. 需要获得当前下拉框的值
    var cartypeValue = $(this).val():
carimg.hide().attr(“src”,””);;
    //2. 如果值不为空，则将下拉框的值传送给服务器
    if(cartypeValue != “”) {
        if(!cartypeSelect.data(cartypeValue)) {
        $.post(“ChainSelect”,{keyward: cartypeValue,type: sub}, function(data){
//2.1 接收服务器返回的汽车类型
            if(data.length != 0) {
//2.2 解析汽车类型的数据，填充到车轮类型下拉框中
    carwheelSelect.html(“”);
    $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)
.appendTo(wheeltypeSelect);
          wheeltypeSelect.parent().show();  //车轮类型的下拉框显示出
          cartypeSelect.next().show();   //第二个下拉框后面的指示图片显示出来
        }
} else {
                //2.3 没有任何汽车类型的数据
                wheeltypeSelect.parent().hide();
                cartypeSelect.next().hide();
            }
            cartypeSelect.data(cartypeValue,data);
}, ”json”)
}else {
    var data = cartypeSelect.data(cartypeValue);
if(data.length != 0) {
//2.2 解析汽车类型的数据，填充到车轮类型下拉框中
    carwheelSelect.html(“”);
    $(“<option value=’’>请选择车轮类型</option>”).appendTo(wheeltypeSelect);
        for(var  i = 0; i < data.length; i++) {
          $(“<option value=’” + data[i] + “’>” + data[i]  + “</option>”)
.appendTo(wheeltypeSelect);
          wheeltypeSelect.parent().show();  //车轮类型的下拉框显示出
          cartypeSelect.next().show();   //第二个下拉框后面的指示图片显示出来
        }
} else {
                //2.3 没有任何汽车类型的数据
                wheeltypeSelect.parent().hide();
                cartypeSelect.next().hide();
            }

}
    } else {
    //3. 如果值为空，那么第三个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
    wheeltypeSelect.parent().hide();
    cartypeSelect.next().hide();
    }
});

wheeltypeSelect.change(function(){
    //1. 获取车轮类型
    var wheeltypeValue = $(this).val();
    //2. 根据汽车厂商名称，汽车类型和车轮类型的到汽车图片的文件名
    var carnameValue = carnameSelect.val();
    var cartypeValue = cartypeSelect.val();
    var carimgname = carnameValue + “_” + cartypeValue + “_” + wheeltypeValue + “.jpg”;
    carimg.hide();
$(“.carloading”).show(); //显示loading的图片
    //通过javascript中的Image对象预装载图片
    var cacheimg = new Image();
    $(cacheimg).attr(“src”,”images/” + carimgname).load(function(){
        $(“.carloading”).hide(); //隐藏loading图片
        carimg.attr(“src”,”images/” + carimgname).show();
});
//3. 修改汽车图片节点的src的值，让汽车图片显示
    //carimg.attr(“src”,”images/” + carimgname).show();
});

//给数据装载中的节点定义ajax事件，实现动画提示效果
$(“.loading”).ajaxStart(function(){
    $(this).css(“visibility”,”visible”);
$(this).animate({
        opacity: 0;
},0);
}).ajaxStop(function(){
    //$(this).fadeOut(500);
    $(this).animate({
        opacity: 0;
},500);
});
});

知识宝典

1. img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息会显示出来

2. select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在Jquery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中

3. div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值都为auto.简化方法是margin:0 auto;

4. html的p标签表示一个段落的内容，其中的内容会独占一行或多行，后面的内容会另起一行显示

5. 为了让p中文字和图片居中，可以使用text-align属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清楚

6. visibility的属性值为hidden是，元素隐藏，但是和display为none不同的是，在页面中仍然占据一定的空间，只是不显示

7. 多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分隔

8. change方法对于javascript中的onchange事件，可以处理下拉框内容变化的事件

9. parent方法可以获得一个节点的父节点

10. next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点

11. $.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，Jquery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同

12. Javascript中的简单对象定义方式是{key1:value1, key2:value2}

13. JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{kery1:value1, key2:[1,2,3]} 或[1,2,{key2:value2}]

14. 可以直接$(“<option></option>”)的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中

15. attr方法可以设置或获取某一个节点的属性值

16. ajaxStart在每一个Jquery发出的ajax请求开始前执行，ajaxStop在Jquery队列中所有的ajax请求结束后执行，ajaxComplete在每一个Jquery发出的ajax请求结束后执行

17. fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp, slideDown方法类似

18. animate方法可以实现任意的动画效果，可以控制某个css属性在某个事件内进行变化，从而达到动画的效果

19. opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。Jquery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果

20. data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的符合

21. 可以使用Javascript中的Image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息

22. load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件

jquery实战-级联下拉框

继续阅读

2010年终总结--技术篇

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

门户通专访草根站长九天狼：做站贵在坚持

tabpanel 使用问题

为什么把CSS放头部，script放下面

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

struts2 +jquey uploadify3.2 实现多文件上传，可预览、删除、排序

关于 underscore 中模板引擎的应用示例

JQuery--dom捕获html元素

【JavaScript语法】函数对象的浅拷贝、深拷贝

CSS之折叠菜单

JS--运算符

数组和类数组

web开发之前后端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden

jquery_126_demo