用JQuery和挑选来实现汽车厂商和汽车类型的联动，参考过程如下效果图：

逻辑分析图：

超文本标记语言代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题级联下拉框效果/title link rel='样式表type=' text/css ' href=' CSS/链选。' CSS '脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : js/jquery。js /脚本脚本脚本语言=' JAVAScript ' type=' text/JAVAScript ' src=' http : js/链选。js /脚本/头体汽车名称汽车厂商：选择选项值=' '请选择汽车厂商/option选项值='宝马'宝马/option选项值='奥迪'奥迪/选项选项值='大众'大众/option/select img src=' http : images/pfeil。gif ' alt='有数据//span span class='cartype '汽车类型：select/select/span/div/body/html CSS代码：汽车{ text-align :居中；} .cartype { display:none} js代码：

$(文档)。就绪（函数(){ //找到下拉框var carnameSelect=$(' .卡纳梅')。子代(“选择”)；var cartypeSelect=$(' .推车类型').子代(“选择”)；//给下拉框注册事件卡纳梅塞特。变更(函数(){ var卡纳梅值=$(this)).val()；如果(卡纳梅值！=' '){//卡纳梅值不为空的情况接着判断if(！carnameSelect.data(卡纳梅值)){ //不在缓冲区中，需要向服务器请求$.' post('链结选择，{ KeyWord :卡纳梅值，type:'top'}，function(data){ if (data.length！=0){ //返回的数据不为空cartypeselect。html(" ")；$("选项值="请选择汽车类型/option ').appendo(cartypeselect)；for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').appendo(cartypeselect)；} cartypeSelect.parent().show()；carnameSelect.next().show()；}else{ //返回的数据为空cartypeSelect.parent().hide()；carnameSelect.next().hide()；} carnameselect。数据(carname值，数据)；}，' JSON ')；}else{ //在缓冲区中var data=carnameSelect.data(卡纳梅值);if (data.length！=0){ //返回的数据不为空cartypeselect。html(" ")；$("选项值="请选择汽车类型/option ').appendo(cartypeselect)；for(var I=0；一。数据。长度；I){ $(' option value=' data[I]' ' ' data[I]'/option ').appendo(cartypeselect)；} cartypeSelect.parent().show()；carnameSelect.next().show()；}else{ //返回的数据为空cartypeSelect.parent().hide()；carnameSelect.next().hide()；} } } else {//卡纳梅值为空的情况，隐藏第二个下拉框cartypeSelect.parent().hide()；carnameSelect.next().hide()；} });});如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是利用JQuery和挑选实现级联下拉框的小例子，希望对大家的学习有所帮助。