博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

用Js数组来实现下拉列表连动无刷新

Posted on 2007-02-27 10:38  liufu627  阅读(475)  评论(0)    收藏  举报

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME='Generator' CONTENT='EditPlus'>
<META NAME='Author' CONTENT=''>
<META NAME='Keywords' CONTENT=''>
<META NAME='Description' CONTENT=''>
</HEAD>

<BODY>
<FORM METHOD=POST ACTION='Test_select_etc.html'>
Market:<SELECT NAME='ddlMarket' id='ddlMarket' onchange="processGroup('ddlGroup')"></SELECT>
<br/>
Group:<SELECT NAME='ddlGroup' id='ddlGroup'></SELECT>
</FORM>
</BODY>
<script type='text/javascript'>
var arrMarket= new Array();
var arrGroup = new Array();
var ddlMarket = document.getElementById( "ddlMarket" );
var ddlGroup = document.getElementById( "ddlGroup" );

function Init()
{ 
 //init Market
 var oOption = document.createElement('OPTION');
 ddlMarket.options.add( oOption);
 oOption.innerText = "Please select Market " ;
 for( var index= 1; index < 10;index ++ )
 {
 var oOption = document.createElement('OPTION');
 ddlMarket.options.add( oOption);
 oOption.innerText = "Market " + index;
 }

 //init group
 arrGroup[ 0] = new Array();
 arrGroup[0][0]  = 'please select Group';

 for( var indexMarket = 1; indexMarket < ddlMarket.options.length; indexMarket ++ )
 {
  arrGroup[ indexMarket ] = new Array();
  arrGroup[indexMarket ][0]  = 'please select Group';

   for( var indexGroup = 1 ; indexGroup < 10 ; indexGroup ++ )
   {
   arrGroup[indexMarket ] [ indexGroup] = ddlMarket.options[ indexMarket ] .innerText + "----" + indexGroup ;
   }
 }

 //init group select

 for( var index = 0; index < arrGroup[0].length; index ++ )
 {
  var oOption = document.createElement('OPTION');
   ddlGroup.options.add( oOption );
 oOption.innerText =arrGroup[0][index];
 }
}


function processGroup(id)
{
 var ddlMarket = window.event.srcElement;
 var ddlGroup = document.getElementById( id );
 for( var index = ddlGroup.length -1 ; index >= 0   ; index-- )
  {
 ddlGroup.remove(index);
 }
// alert( ddlMarket.selectedIndex );
 for( var index = 0; index < arrGroup[ddlMarket.selectedIndex].length; index ++ )
 {
  var oOption = document.createElement('OPTION');
   ddlGroup.options.add( oOption );
 oOption.innerText =arrGroup[ddlMarket.selectedIndex][index];
 }
}
Init();
</script>
</HTML>