在制作项目的时候，总会用到地区·产品分类等的无限联动，为了复用性，写出了一个可以复用的JS文件

文件分为两个部分

1）JS复用文件

2）数据文件

 

在HTML中引用

 

 
  
  1. <html> 
  2.     <script src='jquery.js'></script> 
  3.     <!--数据文件--> 
  4.     <script src='area.js'></script> 
  5.     <h1>无限联动</h1> 
  6.     <!--JS文件输出文件--> 
  7.     <script src='wxldmut.js'></script> 
  8. </html> 
 
  
 
 
  
JS文件写出了两个
 
  
输出为单选   wxldid.js
 
  
 
  
  1.  
  2. var sels = new Array();  
  3. var divname = 'sel-div';  
  4. var objindex = 1;  
  5. var sels;  
  6.  
  7.     selsRef();  
  8.     document.write("<div name='"+divname+"'>"+ sels +"</div>");  
  9.     writeFirstSelect();  
  10.  
  11. function selsRef()  
  12. {  
  13.     sels = "<select id='sel-"+objindex+"' name='select' οnchange='selIndexChange(this)'>"+optionsstr+"</select>";  
  14. }  
  15.  
  16. function writeFirstSelect()  
  17. {  
  18.     selsRef();  
  19.     var flag = 0;  
  20.     $('div[name='+ divname +'] select[name^=sel]:first option').each(function(index){  
  21.           if(parseInt($(this).attr('name')) == 0 || parseInt($(this).val()) == 0)  
  22.             flag++;  
  23.           else 
  24.             $(this).replaceWith('');  
  25.      });  
  26. }  
  27.  
  28. function selIndexChange(obj)  
  29. {  
  30.     var objname = $(obj).attr('id');  
  31.     var objvalue = $(obj).val();  
  32.     var flag = 0;  
  33.  
  34.     if(objvalue != 0)  
  35.     {  
  36.         $('select[id='+objname+']~select[id^=sel]').replaceWith('');  
  37.         var names = objname.split('-');  
  38.         objindex = parseInt(names[1]) + 1;  
  39.         selsRef();  
  40.             var divhtml = $('div[name='+ divname +']').html();  
  41.             $('div[name='+ divname +']').html(divhtml + sels);  
  42.  
  43.             $('div[name='+ divname +'] select[id^=sel]:last option').each(function(index){  
  44.                   if(parseInt($(this).attr('name')) == parseInt(objvalue) || parseInt($(this).val()) == 0)  
  45.                   {  
  46.                       if(parseInt($(this).val()) != 0)  
  47.                           flag++;  
  48.                   }  
  49.                   else 
  50.                     $(this).replaceWith('');  
  51.             });  
  52.             if(flag == 0)  
  53.               $('div[name='+ divname +'] select[id^=sel]:last').replaceWith('');  
  54.     }  
  55.     else 
  56.     {  
  57.         $('select[name='+objname+']~select[id^=sel]').replaceWith('');  
  58.     }  
  59. } 
 
  
 
 
  
输出为多选 wxldmut.js
 
  
 
  
  1.  
  2. var sels = new Array();  
  3. var divname = 'sel-div';  
  4. var objindex = 1;  
  5. var selectstyle = "style='width:110px;'";  
  6. var sels;  
  7.  
  8.  
  9.     selsRef();  
  10.     document.write("<div name='"+divname+"'>"+ sels +"</div>");  
  11.     writeFirstSelect();  
  12.  
  13. function selsRef()  
  14. {  
  15.     sels = "<select id='sel-"+objindex+"' name='select' multiple='multiple' "+selectstyle+" size='8' οnchange='selIndexChange(this)'>"+optionsstr+"</select>";  
  16. }  
  17.  
  18. function writeFirstSelect()  
  19. {  
  20.     selsRef();  
  21.     var flag = 0;  
  22.     $('div[name='+ divname +'] select[name^=sel]:first option').each(function(index){  
  23.             
  24.           if(parseInt($(this).attr('name')) == 0)  
  25.             flag++;  
  26.           else 
  27.             $(this).replaceWith('');  
  28.  
  29.      });  
  30. }  
  31.  
  32. function selIndexChange(obj)  
  33. {  
  34.     var objname = $(obj).attr('id');  
  35.     var objvalue = $(obj).val();  
  36.     var flag = 0;  
  37.  
  38.     if(objvalue != 0)  
  39.     {  
  40.         $('select[id='+objname+']~select[id^=sel]').replaceWith('');  
  41.         var names = objname.split('-');  
  42.         objindex = parseInt(names[1]) + 1;  
  43.         selsRef();  
  44.             var divhtml = $('div[name='+ divname +']').html();  
  45.             $('div[name='+ divname +']').html(divhtml + sels);  
  46.  
  47.             $('div[name='+ divname +'] select[id^=sel]:last option').each(function(index){  
  48.                   if(parseInt($(this).attr('name')) == parseInt(objvalue))  
  49.                   {  
  50.                           flag++;  
  51.                   }  
  52.                   else 
  53.                     $(this).replaceWith('');  
  54.             });  
  55.             if(flag == 0)  
  56.               $('div[name='+ divname +'] select[id^=sel]:last').replaceWith('');  
  57.     }  
  58.     else 
  59.     {  
  60.         $('select[name='+objname+']~select[id^=sel]').replaceWith('');  
  61.     }  
  62. } 
 
  
 
 
  
数据文件的格式如下
 
  
 
 
  
 
  
  1. var optionsstr = "<option value='0'>请选择</option><option name='0' value='1'>a</option><option name='0' value='2'>a</option><option name='1' value='5'>asd</option><option name='2' value='6'>123</option><option name='5' value='8'>jhg</option><option name='0' value='9'>asd</option><option name='0' value='10'>123ff</option><option name='10' value='11'>asd</option><option name='9' value='12'>xcv</option><option name='10' value='13'>45678</option><option name='13' value='14'>a</option><option name='13' value='15'>b</option><option name='13' value='16'>c</option><option name='13' value='17'>d</option><option name='13' value='18'>e</option><option name='13' value='19'>r</option><option name='13' value='20'>t</option><option name='13' value='21'>y</option><option name='0' value='22'>ffff</option><option name='15' value='24'>c</option><option name='15' value='25'>b</option><option name='15' value='26'>c</option><option name='25' value='27'>a</option><option name='25' value='28'>b</option><option name='25' value='29'>c</option><option name='28' value='30'>a</option><option name='28' value='31'>b</option><option name='28' value='32'>c</option><option name='2' value='33'>lz</option><option name='2' value='34'>zt</option><option name='2' value='35'>gl</option><option name='1' value='36'>cnv</option><option name='31' value='38'>lzyes</option><option name='31' value='39'>ztno</option><option name='31' value='40'>glyesno</option><option name='1' value='41'>a</option><option name='1' value='42'>a</option><option name='1' value='43'>a</option><option name='1' value='44'>a</option><option name='1' value='45'>a</option><option name='1' value='46'>a</option><option name='1' value='47'></option><option name='10' value='48'>lz</option><option name='10' value='49'>gl</option><option name='10' value='50'>Zt</option><option name='39' value='51'>12345</option>"; 
 
  
 
 
  
 
 
  
为了方便使用数据文件，制作了一个文件生成器，可在附件中下载