jquery + json 三级联动select

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

 

 

  $(function (){

 

    var A0="";

    var A1="";

    var A2="";

 

    jQuery.each(s.insurance,function (i0,v){

     A0 +='<option value="'+v.vendorId+'">'+v.cnName+'</option>';

 

    jQuery.each(v.insuranceList,function (i1,v1){

    

        if(i0!=0)return true;

    A1 +='<option value="'+v1.insuranceId+'">'+v1.insuranceName+'</option>';

    

     jQuery.each(v1.insureMerchandiseList,function (i2,v2){

     if(i1!=0)return true;

 A2 +='<option value="'+v2.merchandiseId+'">'+v2.name+'</option>';

     

     })

     $("#A2").html(A2);

       

    })

        $("#A1").html(A1);

    })

   $("#A0").html(A0);

 

 

 

 

   $("#A0").change(function (){

     getSelect2($(this).val());

   })

 

   $("#A1").change(function (){

     getSelect3($("#A0").val(),$(this).val());

   })

 

  })

 

  function getSelect2(s1){

 

      jQuery.each(s.insurance,function (i0,v){

 

     if(v.vendorId==s1){

     

            var A1="";

            var A2="";

    jQuery.each(v.insuranceList,function (i1,v1){

    

    A1 +='<option value="'+v1.insuranceId+'">'+v1.insuranceName+'</option>';

    

    jQuery.each(v1.insureMerchandiseList,function (i2,v2){

    

       if(i1==0)

       A2 +='<option value="'+v2.merchandiseId+'">'+v2.name+'</option>';

     

     })

          

        

    })

    

    $("#A2").html(A2);

    $("#A1").html(A1);

    return false;

 }

 

    })

 

  }

 

 

 function getSelect3(s1,s2){

 

 // alert(s1);

      jQuery.each(s.insurance,function (i0,v){

 

     if(v.vendorId==s1){

           

    jQuery.each(v.insuranceList,function (i1,v1){

    

   if(v1.insuranceId==s2){

    

        var A2="";

    jQuery.each(v1.insureMerchandiseList,function (i2,v2){

    

     A2 +='<option value="'+v2.merchandiseId+'">'+v2.name+'</option>';

     

     })

     

           $("#A2").html(A2);

           

           return false;

           

           }

        

    })

    

  

   

 }

 

    })

 

  }

 

 

 

 

<select id="A0" name="A0" style="width: 100px;" onmousewheel="return false;"></select>

<select id="A1" name="A1" style="width: 100px;" onmousewheel="return false;"></select>

<select id="A2" name="A2" style="width: 100px;" onmousewheel="return false;"></select>

 

 

var s=$.evalJSON('{"insurance":[{"cnName":"平安","insuranceList":[{"insuranceId":11,"insuranceName":"平安旅行险","insureMerchandiseList":[{"merchandiseId":111,"name":"平安旅行险A计划","plan":"平安旅行险A计划亚洲基本款"},{"merchandiseId":222,"name":"平安旅行险B计划","plan":"平安旅行险B计划亚洲全面款"}]},{"insuranceId":22,"insuranceName":"平安航意险","insureMerchandiseList":[{"merchandiseId":333,"name":"平安航意险A计划","plan":"平安航意险A计划亚洲基本款"},{"merchandiseId":444,"name":"平安航意险B计划","plan":"平安航意险B计划亚洲全面款"}]}],"vendorId":1},{"cnName":"华泰","insuranceList":[{"insuranceId":88,"insuranceName":"华泰旅行险","insureMerchandiseList":[{"merchandiseId":555,"name":"华泰旅行险A计划","plan":"华泰旅行险A计划亚洲基本款"},{"merchandiseId":666,"name":"华泰旅行险B计划","plan":"华泰旅行险B计划亚洲全面款"}]},{"insuranceId":99,"insuranceName":"华泰航意险","insureMerchandiseList":[{"merchandiseId":777,"name":"华泰航意险A计划","plan":"华泰航意险A计划亚洲基本款"},{"merchandiseId":888,"name":"华泰航意险B计划","plan":"华泰航意险B计划亚洲全面款"}]}],"vendorId":2}]}');