jquery实现三级联动

编程技术  /  houtizong 发布于 3年前   98

$(document).ready(function(){
    $("#province").width("70");
    $("#city").width("70");
    $("#mysub").click(submit);//为提交按钮加监听器
    
    $("#province > option").remove();
    //省份查询方法
    $.ajax({
     url:"queryprovince.1003?method=queryprovince",
     type:'POST',
      success: function(msg){
       var arr = eval("("+msg+")");
       for(var i=0;i<arr.length;i++){
        var name = arr[i].name;
        $("#province").append($("<option>"+name+"</option>"));
       }
      }
    });
    
    //城市查询方法
    $("#province").change( function() {
     
     $("#city > option").remove();
     $("#area > option").remove();
     //alert($("#province").val());
     $.ajax({
      url:"querycity.1003?method=querycity",
      type:'POST',
      data: "province="+$("#province").val(),
       success: function(msg){
        var arr = eval("("+msg+")");
        for(var i=0;i<arr.length;i++){
         var name = arr[i].name;
         $("#city").append($("<option>"+name+"</option>"));
        }
       }
     });
  });
  
  
  //区县查询方法
    $("#city").change(function(){
     $("#area > option").remove();
     $("#city").width("70");
     //alert($("#area").val());
     $.ajax({
      url:"queryarea.1003?method=queryarea",
      type:'POST',
      data: "city="+$("#city").val(),
       success: function(msg){
        var arr = eval("("+msg+")");
        for(var i=0;i<arr.length;i++){
         var name = arr[i].name;
         $("#area").append($("<option>"+name+"</option>"));
        }
       }
     });
    });
   });