用jQuery,ajax,实现三级联动封装JS的文件
Posted <一>
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用jQuery,ajax,实现三级联动封装JS的文件相关的知识,希望对你有一定的参考价值。
// javascript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "<select id=‘sheng‘></select><select id=‘shi‘></select><select id=‘qu‘></select>"; $("#sanji").html(str); //加载省的数据 Hsheng(); //加载市的数据 Hshi(); //加载区的数据 Hqu(); //给省的下拉加点击事件 $("#sheng").click(function(){ Hshi();//重新加载市 Hqu();//重新加载区 }); $("#shi").click(function(){//给市的下拉加点击事件 Hqu();//重新加载区 }); }); function Hsheng(){//加载省份的方法 var code="0001"; $.ajax({ url:"shicl.php", data:{code:code}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("-"); str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; } $("#sheng").html(str); } }); } function Hshi(){//加载市的方法 var code=$("#sheng").val();//找市的父级代号 $.ajax({ url:"shicl.php", data:{code:code}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("-"); str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } function Hqu(){//加载区的方法 var code=$("#shi").val();//找区的父级代号 $.ajax({ url:"shicl.php", data:{code:code}, type:"POST", dataType:"TEXT", success: function(data){ var hang = data.split("|"); var str = ""; for(var i=0;i<hang.length;i++) { var lie = hang[i].split("-"); str = str +"<option value=‘"+lie[0]+"‘>"+lie[1]+"</option>"; } $("#qu").html(str); } }); }
以上是关于用jQuery,ajax,实现三级联动封装JS的文件的主要内容,如果未能解决你的问题,请参考以下文章