$(document).ready(function(){ //找到三个下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); var wheeltypeSelect = $(".wheeltype").children("select"); var carimg = $(".carimg"); //给三个下拉框注册事件 carnameSelect.change(function(){ //1.需要获得当前下拉框的值 var carnameValue = $(this).val(); //1.1只要第一个下拉框内容有变化,第三个下拉框都要先隐藏起来 wheeltypeSelect.parent().hide(); //1.2将汽车图片隐藏起来 carimg.hide().attr("src",""); //2.如果值不为空,则将下拉框的值传送给服务器 if (carnameValue != "") { if (!carnameSelect.data(carnameValue)) { $.post("ChainSelect",{keyword: 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); } //2.2.1汽车类型的下拉框显示出 cartypeSelect.parent().show(); //2.2.2第一个下拉框后面的指示图片显示出来 carnameSelect.next().show(); } else { //2.3没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue, data); }, "json"); } else { var data &
jquery级联下拉框
最新推荐文章于 2023-03-31 15:57:53 发布