<strong><!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"> </strong><머리> <div class="codetitle"><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <span><title>jQuery 2级联动</title> <a style="CURSOR: pointer" data="66794" class="copybut" id="copybut66794" onclick="doCopy('code66794')"><script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <u><script type="text/javascript"> </u>$(document).ready(function(){ </a>$("#province").change(function(){ </span>$("#province option").each(function(i,o ){ </div>if($(this).attr("selected")) <div class="codebody" id="code66794">{ <br>$(".city").hide() <br>$(".city").eq (i).show(); <br>} <br>}); <br>}) <br>$("#province").<br>}); <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><br>JQuery의 새로운 버전<br> <br>先看页face代码 <br>Html代码 <br><br><br><br><br>复제代码<br> </div> <br> 代码如下:<strong></strong> <br><tr> <br><td align="right" width="30%"><span class="red">*</span>短信类型：</td> <br><td align="왼쪽"> <div class="codetitle"><select name='city' id='first'> <span><옵션 값='-1'>==请选择类型==</option> <a style="CURSOR: pointer" data="58509" class="copybut" id="copybut58509" onclick="doCopy('code58509')"><#list typeList as t> <u><옵션 값='${t.id}'>${t.name}</option> </u></#list> </a></select> </span> </div><span id="second"> <div class="codebody" id="code58509"><select id="area" name="msgTypeId"> <br></select> <br></span> <br></td> <br></tr> <br><br> <br>其中id为first下拉列表，id为列表，id为下拉列表。 <br>JavaScript代码 <br><br><br> <br><br>复主代码<br><br><br> 代码如下:<br> </div> <br><script 언어="javascript"> <br>$(function(){ <br>$("#second").hide(); //初始性时候第二个下拉列表隐藏 <div class="codetitle">$("#first").change(function( ){ //当第一个下拉列表变动内容时第新个下拉列表将会显示 <span>var parentId=$("#first").val() <a style="CURSOR: pointer" data="36482" class="copybut" id="copybut36482" onclick="doCopy('code36482')">if(null!= parentId && " "!=parentId){ <u>$.getJSON("http://localhost/msg/getSecondTypesJson",{id:parentId},function(myJSON){ </u>var options=""; </a>if( myJSON.length>0){ </span>options ="<option value=''>==请选择类型==</option>" </div>for(var i=0;i<myJSON. length;i ){ <div class="codebody" id="code36482">options ="<option value=" myJSON[i].id ">" myJSON[i].name "<br>} <br>$( "#area").html(options); <br>$("#second").show(); <br>} <br>else if(myJSON.length<=0){ <br>$(" #second").hide(); <br>} <br>}); <br>} <br>else{ <br>$("#second").hide(); <br>} <br> }) <br>}); <br></script> <br><br>
