无刷新下拉列表内容更换

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章原始出版、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/mayongzhan - 马永占,myz,mayongzhan

标题名字有点怪

其实简单的说就是,有个国家的列表,还有个城市的列表,然后通过选择国家,将城市列表的内容换成相关城市.OK

先是一段javascript,然后是表单,然后是一段调用的javascript

有注释的地方是可以替换的部分

主要是通过触发onChange="changelocation(document.addform.ypxxone_id.options[document.addform.ypxxone_id.selectedIndex].value)"

改变小类的内容

其中的数组第一个是小类的名称,也是在列表中显示的部分,大类的的ID是选择了大类后,需要小类显示的是该大类的内容,小类的ID,是用在fomr option name 中的内容.

例如form中

<option value="1" selected="selected">中国</option>

<option value="2" selected="selected">美国</option>

然后小类的数组是

subcat[0] = new Array("天津","1*/","022");

subcat[1] = new Array("锦州","1","0416");

subcat[2] = new Array("北京","1","010");

subcat[2] = new Array("newyork","2","0001");

subcat[2] = new Array("Chicago","2","0002");

subcat[2] = new Array("tokyo","3","0003");

onecount=3; //这个是数组的长度,用于循环使用

选择中国的时候就会出现天津,锦州,北京.选择美国的时候就会出现newyork chicago

----------------------------------------------------------------

<script language = "JavaScript">

var onecount;

subcat = new Array();

subcat[0] = new Array("/*小类名称*/","/*大类的ID*/","/*小类的ID*/");

subcat[1] = new Array("/*小类名称*/","/*大类的ID*/","/*小类的ID*/");

subcat[2] = new Array("/*小类名称*/","/*大类的ID*/","/*小类的ID*/");

onecount=3;

function changelocation(ypxxone)

{

document.addform.ypxxtwo_id.length = 0;

var ypxxone_id=ypxxone_id;

var i;

document.addform.ypxxtwo_id.options[0] = new Option('请选择小类','');

for (i=0;i < onecount; i++)

{

if (subcat[i][1] == ypxxone)

{

document.addform.ypxxtwo_id.options[document.addform.ypxxtwo_id.length] = new Option

(subcat[i][0], subcat[i][2]);

}

}

}

</script>

----------------------------------------------

<form action="xxx.post" method="post" name="addform" enctype="multipart/form-data" id="addform">

<td>选择大类:<select name="ypxxone_id" onChange="changelocation(document.addform.ypxxone_id.options[document.addform.ypxxone_id.selectedIndex].value)">

<option value="0" selected="selected">请选择大类</option>

/*其中是其他大类*/.

</select>

</td>

<tr>

<tr>

<td>选择小类:<select name="ypxxtwo_id">

<option value="0" selected="selected">请选择小类</option>

</select>

</td>

<tr>

<td><br /><input name="submit" type="submit" value="提交" />

</td>

</tr>

</form>

-----------------------------------------------

<script language="javascript">

changelocation(document.addform.ypxxone_id.options[document.addform.ypxxone_id.selectedIndex].value);

</script>

v