JQuery實(shí)現(xiàn)級(jí)聯(lián)下拉框效果實(shí)例講解
用JQuery和select來實(shí)現(xiàn)汽車廠商和汽車類型的聯(lián)動(dòng),參考過程如下
效果圖:
邏輯分析圖:
html代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>級(jí)聯(lián)下拉框效果</title> <link rel="stylesheet" type="text/css" href="css/chainselect.css"> <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/chainselect.js"></script> </head> <body> <div class="car"> <span class="carname"> 汽車廠商: <select> <option value="">請(qǐng)選擇汽車廠商</option> <option value="BMW">寶馬</option> <option value="Audi">奧迪</option> <option value="VW">大眾</option> </select> <img src="images/pfeil.gif" alt="有數(shù)據(jù)"/> </span> <span class="cartype"> 汽車類型: <select></select> </span> </div> </body> </html>
css代碼:
.car { text-align:center; } .cartype{ display:none; }
js代碼:
$(document).ready(function(){ //找到下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); //給下拉框注冊(cè)事件 carnameSelect.change(function(){ var carnameValue = $(this).val(); if( carnameValue != ""){ //carnameValue不為空的情況接著判斷 if(!carnameSelect.data(carnameValue)){ //不在緩沖區(qū)中,需要向服務(wù)器請(qǐng)求 $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){ if (data.length != 0){ //返回的數(shù)據(jù)不為空 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</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{ //返回的數(shù)據(jù)為空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue,data); },"json"); }else{ //在緩沖區(qū)中 var data = carnameSelect.data(carnameValue); if (data.length != 0){ //返回的數(shù)據(jù)不為空 cartypeSelect.html(""); $("<option value=''>請(qǐng)選擇汽車類型</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{ //返回的數(shù)據(jù)為空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } } }else{ //carnameValue為空的情況,隱藏第二個(gè)下拉框 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } }); });
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進(jìn)行學(xué)習(xí)。
以上就是利用JQuery和select實(shí)現(xiàn)級(jí)聯(lián)下拉框的小例子,希望對(duì)大家的學(xué)習(xí)有所幫助。
- jQuery操作select下拉框的text值和value值的方法
- jquery multiSelect 多選下拉框
- 基于jQuery的select下拉框選擇觸發(fā)事件實(shí)例分析
- jquery及原生js獲取select下拉框選中的值示例
- jquery獲得下拉框值的代碼
- jquery動(dòng)態(tài)加載select下拉框示例代碼
- jQuery+easyui中的combobox實(shí)現(xiàn)下拉框特效
- Jquery操作下拉框(DropDownList)實(shí)現(xiàn)取值賦值
- jQuery實(shí)現(xiàn)監(jiān)聽下拉框選中內(nèi)容發(fā)生改變操作示例
- jquery實(shí)現(xiàn)戶籍地選擇下拉框
相關(guān)文章
jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例
這篇文章主要為大家介紹了jquery編寫彈出信息提示條并延時(shí)滑出動(dòng)畫實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Easyui使用Dialog行內(nèi)按鈕布局的實(shí)例
下面小編就為大家?guī)硪黄狤asyui使用Dialog行內(nèi)按鈕布局的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jquery插件實(shí)現(xiàn)圖片對(duì)比
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對(duì)比,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼,可實(shí)現(xiàn)滑塊跟隨鼠標(biāo)滑動(dòng)效果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09選擇TreeView控件的樹狀數(shù)據(jù)節(jié)點(diǎn)的JS方法(jquery)
前些日子為了提高人性化選擇樹狀權(quán)限的功能,根據(jù)樹的結(jié)構(gòu)用jquery寫了個(gè)方法。2010-02-02jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了jquery mobile移動(dòng)端幻燈片滑動(dòng)切換效果,實(shí)現(xiàn)滑動(dòng)切換和點(diǎn)擊切換,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01