<strong>jQuery 1.3.2 简单实现select二级联動 <br></strong><div class="codetitle"> <span><a style="CURSOR: pointer" data="66794" class="copybut" id="copybut66794" onclick="doCopy('code66794')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code66794"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <br><title>jQuery 二級联動</title> <br><script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$(document).ready(function(){ <br>$("#province").change(function(){ <br>$("#province オプション").each(function(i,o ){ <br>if($(this).attr("selected")) <br>{ <br>$(".city").hide(); <br>$(".city").eq (i).show(); <br>} <br>}); <br>$("#province").change(); <br></script> <br></head> <br> <br><select id="province"> <br><option>---请选择省份---- <br><option>北京 <br><option>上海 <br><option>江苏 <br></select> <br><select class="city"> <br><option>---请选择城市---- <br></select> <br><select class="city"> <br><option>东城</option> <br><option>西城</option> <br><option>崇文</option> <br><option>宣武</option> <br><option>朝阳</option> <br></select> <br><select class="city"> <br><option>黄浦</option> <br><option>卢湾</option> <br><option>徐汇</option> <br><option>长宁</option> <br><option>静安</option> <br></select> <br><select class="city"> <br><option>南京</option> <br><option>镇江</option> <br><option>苏州</option> <br><option>南通</option> <br><option>扬州</option> <br></select> <br></body> <br></html> <br><br> <br></select> </div>JQuery 实现的二級联动菜单<br> <strong>先看页面代码 </strong>Html代码 <br><br><br><div class="codetitle"> <span>复制代码<a style="CURSOR: pointer" data="58509" class="copybut" id="copybut58509" onclick="doCopy('code58509')"><u></u> 代码如下:</a></span> </div><tr> <div class="codebody" id="code58509"><td align="right" width="30%"><span class="red">*</span>短信类型：</td> <br><td align="left"> <br><select name='city' id='first'> <br><option value='-1'>==请选择型==</option> <br><#list typeList as t> <br><option value='${t.id}'>${t.name}</option> <br></#list> <br></select> <br> <br><span id="second"> <br><select id="エリア" name="msgTypeId"> <br></select> <br></span> <br></td> <br></tr> <br><br> <br> ここで、id が最初のダウンロード テーブルであり、id が 2 番目の領域が 2 番目のダウンロード リストです。 </div> <br>复制代码<br><br><div class="codetitle">代码如下:<span><a style="CURSOR: pointer" data="36482" class="copybut" id="copybut36482" onclick="doCopy('code36482')"> <u><script language="javascript"> </u>$(function(){ </a>$("#first").hide(); //初化の開始時期第二下拉列表隐藏 </span>$("#first").change(function( ){ //当第１の下拉列表が移動内容を示すとき、第２の下拉列表は会議を表示します </div>varparentId=$("#first").val(); <div class="codebody" id="code36482">if(null!=parentId && " "!=parentId){ <br>$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ <br>var options=""; <br>if( myJSON.length>0){ <br>options ="<option value=''>==请选择类型==</option>"; <br>for(var i=0;i<myJSON. length;i ){ <BR>options ="<option value=" myJSON[i].id ">" myJSON[i].name "</option>"; "#エリア").html(オプション); <br>$("#秒").show(); <br>} <br>else if(myJSON.length$(" #秒").hide(); <br>} <br>}); <br>} <br>else{ <br>$("#秒").hide(); <br>} <br> }); <br>}); <br></script> <br><br> </div>
