


Pelaksanaan JQuery bagi contoh kesan kotak drop-down cascading explanation_jquery
May 16, 2016 pm 03:38 PMGunakan JQuery dan pilih untuk merealisasikan hubungan antara pengeluar kereta dan jenis kereta Proses rujukan adalah seperti berikut
Rendering:
Rajah analisis logik:
kod 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>级联下拉框效果</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="">请选择汽车厂商</option> <option value="BMW">宝马</option> <option value="Audi">奥迪</option> <option value="VW">大众</option> </select> <img src="/static/imghw/default1.png" data-src="images/pfeil.gif" class="lazy" alt="Pelaksanaan JQuery bagi contoh kesan kotak drop-down cascading explanation_jquery"/> </span> <span class="cartype"> 汽车类型: <select></select> </span> </div> </body> </html>
kod css:
.car { text-align:center; } .cartype{ display:none; }
kod js:
$(document).ready(function(){ //找到下拉框 var carnameSelect = $(".carname").children("select"); var cartypeSelect = $(".cartype").children("select"); //给下拉框注册事件 carnameSelect.change(function(){ var carnameValue = $(this).val(); if( carnameValue != ""){ //carnameValue不为空的情况接着判断 if(!carnameSelect.data(carnameValue)){ //不在缓冲区中,需要向服务器请求 $.post("ChainSelect",{keyword:carnameValue,type:"top"},function(data){ 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{ //返回的数据为空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue,data); },"json"); }else{ //在缓冲区中 var data = carnameSelect.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{ //返回的数据为空 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } } }else{ //carnameValue为空的情况,隐藏第二个下拉框 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } }); });
Di atas ialah contoh kecil menggunakan JQuery dan pilih untuk melaksanakan kotak lungsur turun bertingkat Saya harap ia akan membantu pembelajaran semua orang.

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Ganti aksara rentetan dalam javascript

Tutorial Persediaan API Carian Google Custom

8 plugin susun atur halaman jquery yang menakjubkan

Tingkatkan pengetahuan jQuery anda dengan penonton sumber

10 helaian cheat mudah alih untuk pembangunan mudah alih
