您的位置：首页 > Web前端 > JavaScript

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

2007-02-27 10:38 671 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航