js动态下拉列表实现

有两个下拉列表，一个颜色，一个尺寸，两个下拉列表的数据都是从数据库中取得，因为不太熟悉js，所以弄了半天没弄起来，现在在action中已经将颜色表的对象放入session中 ，代码如下： 
Java代码 
function select()   
{    
var select=document.getElementById("select1");   
var size=document.getElementById("size").value;   
  
alert(size);   
for(var i=0;i<size;i++)   
{   
    select.options.add(new Option(i,i));   
}   
}   
  
</script>   
<--   
</head>   
<body onload="select()">   
//页面显示4   
<div id="size" value="${size}" />   
//页面显示红，黄，橙 ，绿   
<c:forEach items="${color}" var="info" >   
<tr>${info.colorName }</tr>   
</c:forEach>   
-->   
  
<select id="select1" name="select1" onchange="change()">  function select()
{ 
var select=document.getElementById("select1");
var size=document.getElementById("size").value;alert(size);
for(var i=0;i<size;i++)
{
select.options.add(new Option(i,i));
}
}</script>
<--
</head>
<body onload="select()">
//页面显示4
<div id="size" value="${size}" />
//页面显示红，黄，橙 ，绿
<c:forEach items="${color}" var="info" >
<tr>${info.colorName }</tr>
</c:forEach>
--><select id="select1" name="select1" onchange="change()">
其中select.options.add(new Option(i,i));中怎样才能将红，黄，橙 ，绿显示在下拉列表中 

解决方案 »

  1.   

    太乱了.把最后输出的html贴出来.
      

  2.   

    </head> 
    <body onload="select()"> 
    //页面显示4 
    <div id="size" value="${size}" /> 
    //页面显示红，黄，橙 ，绿 
    <c:forEach items="${color}" var="info" > 
    <tr>${info.colorName } </tr> 
    </c:forEach> 
    ，
    就是想把红，黄，橙 ，绿 显示在页面下拉列表中，而不是0123
      

  3.   


    var color=["红"，"黄","蓝"]
    for(var i=0;i <size;i++) 
    { 
    select.options.add(new Option(color[i],i)); 
    } 
      

  4.   


    红黄蓝是从数据库中查询后放在session中，不是直接写在js中的，就是想问怎样在js中调用这个session中数据（红黄蓝是在页面里从session中迭代出来的）
      

  5.   

    由于div的childNodes不确定因素太多，所以没用。
    函数改成
    function select(){
    var sel=document.getElementById("select1");
    var size=document.getElementById("size").value; 
    var divName=document.getElementById("size");
    var divHTML=divName.innerHTML;
    var temp=divHTML.split("</TR>");
    var num="<TR>".length;
    for (var i=0;i<size; i++)
    {
    sel.options.add(new Option(temp[i].substr(temp[i].indexOf("<TR>")+num,temp[i].length),i));
    }

    }
      

  6.   

    split(" </TR>");去掉空格
    var num=" <TR>".length; 
    也去掉空格
      

  7.   

    session中的对象不是被你分别放在<div id="size" value="${size}" />  和它的子对象中了吗？
    只要你页面代码没有换，再把我做的函数中<TR>和</TR>前面的空格去掉就应该可以了。我做的是动态读取你页面中的值。不是写死的！
      

  8.   


    size当然好传了，我说的是<c:forEach items="${color}" var="info" > 
    <tr>${info.colorName } </tr> 
    </c:forEach> 中的colorName这个需要迭代才能再页面显示的怎么在js中展示
      

  9.   

    var divName=document.getElementById("size"); 
    var divHTML=divName.innerHTML; 
    var temp=divHTML.split(" </TR>"); 
    var num=" <TR>".length; 
    for (var i=0;i <size; i++) 
    { 
    sel.options.add(new Option(temp[i].substr(temp[i].indexOf(" <TR>")+num,temp[i].length),i)); 
    } 
    红字都是读取迭代在页面中的值。