日期:2014-05-18  浏览次数:20598 次

如何将一个select下拉的内容通过javascript填充到另一个select下拉中
问题描述:假如在一个select中有“水果(热带水果,温带水果等)”属性,选择某一类水果如“热带水果”,如何通过javascript控制select的onchange在另一个select中显示属于热带水果的子项如:苹果

------解决方案--------------------
这个根显示省份和市的有区别吗??楼主去找一下吧
------解决方案--------------------
LZ去参考一下我早些年写的这篇文章吧:
http://web.mblogger.cn/jamesfancy/posts/28200.aspx
------解决方案--------------------
大概就是这个样子(根据大类ID返回子类信息)。。。

<select name= "bigTypeSelect " onchange= "getSmallType(this.value); ">
<option value= "-1 ">
未选择
</option>
<c:forEach items= "${bigTypeList} " var= "temp ">
<option value= "${temp.typeId} ">
${temp.typeName}
</option>
</c:forEach>
</select>
<br/>
<select name= "typeId ">
<option value= "-1 ">
未选择
</option>
</select>

<script type= "text/javascript ">

//创建XMLHttpRequest对象
function createXMLHttpRequest()
{
//Mozilla 浏览器
if(window.XMLHttpRequest)
{
XMLHttpReq = new XMLHttpRequest();
}
// IE浏览器
else if (window.ActiveXObject)
{
try
{
XMLHttpReq = new ActiveXObject( "Msxml2.XMLHTTP ");
}
catch (e)
{
try
{
XMLHttpReq = new ActiveXObject( "Microsoft.XMLHTTP ");
}
catch (e) {}
}
}
}

//发送请求函数
function getSmallType(bigTypeId)
{
if(bigTypeId == -1)
{
var typeId = document.forms[0].typeId;
//清空select所有option选项
typeId.options.length = 0;
var option = document.createElement( "option ");
option.text = "未选择 ";
option.value = -1;
typeId.options.add(option);
return false;
}

createXMLHttpRequest();
XMLHttpReq.onreadystatechange = getFinsh;
var url = "getsmalltype.do?bigtypeid= "+bigTypeId;
XMLHttpReq.open( "post ",url , true);
XMLHttpReq.send(null);
}

//处理返回响应函数
function getFinsh()
{
if (XMLHttpReq.readyState == 4)
{
if (XMLHttpReq.status == 200)
{
if(window.ActiveXObject)
{
var xmlDom = new ActiveXObject( "Microsoft.XMLDOM ");
}
else
{
if(document.implementation && document.implementation.createDocument)
{
var xmlDom=document.implementation.createDocument( " ", "doc ",null);
}
}
xmlDom.async = false;
xmlDom.loadXML(XMLHttpReq.responseText);

var typeId = document.forms[0].typeId;
//清空select所有option选项
typeId.options.length = 0;

var smallTypes = xmlDom.getElementsByTagName( "smalltypes/smalltype ");
//包含子类信息
if(smallTypes.length != 0)
{
var option = document.createElement( "option ");
option.text = "未选择 ";
option.value = -1;
typeId.options.add(option);

for(var i = 0;i < sm