读书人

怎么将一个select下拉的内容通过javas

发布时间: 2012-01-08 22:48:50 作者: rapoo

如何将一个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 < smallTypes.length;i ++)


{
//子类ID
var typeIdText = smallTypes[i].firstChild.text;

//子类名
var typeNameText = smallTypes[i].lastChild.text;

//添加子类信息到下拉列表
var option = document.createElement( "option ");
option.text = typeNameText;
option.value = typeIdText;
typeId.options.add(option);
}
}
else
{
var option = document.createElement( "option ");
option.text = "无子类 ";
option.value = document.forms[0].bigTypeSelect.options(document.forms[0].bigTypeSelect.selectedIndex).value;
typeId.options.add(option);
}
}
else
{
alert( "Error data:\n "+ XMLHttpReq.statusText);
}
}
}

------------------------
提交到getsmalltype.do后根据bigtypeid返回所属子类ID+子类NAME集合组装成xml返回到页面。
[解决办法]
http://community.csdn.net/Expert/topic/5697/5697447.xml?temp=.6622888
这个跟你的要求类似,是我一个月前的帖子
你可以参考下

读书人网 >Java Web开发

热点推荐