如何将一个select下拉的内容通过javascript填充到另一个select下拉中

Question

问题描述：假如在一个select中有“水果（热带水果，温带水果等）”属性，选择某一类水果如“热带水果”，如何通过javascript控制select的onchange在另一个select中显示属于热带水果的子项如：苹果

Answer 1

LZ去参考一下我早些年写的这篇文章吧：
http://web.mblogger.cn/jamesfancy/posts/28200.aspx

Answer 2

呵呵,早些年的那可不定合适呀...要是动态从数据库里查询数据的话,就用上Ajax了.

Answer 3

现在已经把数据从后台全部读了过来，是一个Arraylist，javascript中如何调用啊？

Answer 4

大概就是这个样子(根据大类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返回到页面。

Answer 5

假如结合struts的labelvaluebean标签要把actionform里的大类小类关联起来，请问如何实现？

Answer 6

http://community.csdn.net/Expert/topic/5697/5697447.xml?temp=.6622888
这个跟你的要求类似，是我一个月前的帖子
你可以参考下