javascript下拉菜单问题，100分。

有一个下拉菜单，里面有“日期”，有“确认选项”等几个值。
想选择“日期”的时候，下拉彩蛋后面的<input type='text' name='textfield' size='10' />隐藏掉。显示一个日期控件，日期控件的代码我有了。
选择“确认选项”的时候，后面的type='text' 和日期控件全都隐藏掉，出现一个下拉菜单。当选择完“日期”或是确认选项的值后，把值给付到type='text' 上。
因为以上的内容是在一个<tr>下面的。可能需要多个行，需要确认每个值都是付给自己对应的行。
<TBODY>
<tr>
<td>查询条件</td>
<td><select name='selectName' style='width:120px'>
<option value='a'>代码</option>
<option value='b'>企业名称</option>
<option value='c'>日期</option>
<option value='d'>确认选项</option>

</select></td>
<td>运算符</td>
<td><select name='selectFh' style='width:60px'>
<option value='='>等于</option>
<option value='!='>不等于</option>
<option value='>='>大于等于</option>
<option value='<='>小于等于</option>
<option value='like'>类似</option>
<option value='not like'>不类似</option>
</select></td>
<td>比较值</td>
<td><input type='text' name='textfield' size='10' /></td>

<td style="CURSOR: hand" onclick="delRow('whereTable',this)">删除</td>
</tr>
</TBODY>

解决方案 »

  1.   

    嗯，问题看明白了，确认几个地方
    1。>当选择完“日期”或是确认选项的值后，把值给付到type='text'上
    选完后，text已经隐藏掉了，你还要把值给他，是为了什么，把这个值提交上去？
    还有这个值究竟是指什么值，选择“日期”，text里就放“日期”，选择“确认选项”，text里就放“确认选项”吗？2。以上的内容是在一个 <tr> 下面的。可能需要多个行
    既然是多行，那么每一行的select与text应该都有不同的name吧
    先问清楚了我再帮你写
      

  2.   

    对象的display属性，很简单的实现。。
      

  3.   

    把判断要显示或者要隐藏的控件放到div里,然后控制div.
    selectName.selectedIndex == 2;//日期 
    selectName.selectedIndex == 3;//确认选项
      

  4.   

    楼上说的方法比较好些,使用DIV控制方便些
      

  5.   

    5 6楼的方法 用的较多
    display也可以实现
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script>
    function showChange(selected) {
    if(selected == "c") {
    document.getElementById("a").style.display = "none";
    document.getElementById("d").style.display = "none";
    document.getElementById("c").style.display = "";
    }else if(selected == "d") {
    document.getElementById("a").style.display = "none";
    document.getElementById("c").style.display = "none";
    document.getElementById("d").style.display = "";
    }else {
    document.getElementById("d").style.display = "none";
    document.getElementById("c").style.display = "none";
    document.getElementById("a").style.display = "";
    }
    }
    </script>
    </head><body>
    <table>
    <tr>
    <td> 查询条件 </td>
    <td> <select   name="selectName"   style="width:120px" onchange="showChange(this.value)">
    <option   value='a'> 代码 </option>
    <option   value='b'> 企业名称 </option>
    <option   value='c'> 日期 </option>
    <option   value='d'> 确认选项 </option></select> </td>
    <td> 运算符 </td>
    <td> <select   name='selectFh'   style='width:60px'>
    <option   value='='> 等于 </option>
    <option   value='!='> 不等于 </option>
    <option   value='> ='> 大于等于 </option>
    <option   value=' <='> 小于等于 </option>
    <option   value='like'> 类似 </option>
    <option   value='not   like'> 不类似 </option>
    </select> </td>
    <td> 比较值 </td> <td id="a"> <input   type='text'   name='textfield'   size='10'   /> </td> <td id="c" style="display:none"> 时间控件</td>
    <td id="d" style="display:none"><select></select> </td><td   style="CURSOR:   hand"   onclick="delRow('whereTable',this)"> 删除 </td>
    </tr> 
    </table>
    </body>
    </html>显示的代码在这了.赋值的你应该会写的
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function sonchange(){
    deletelasttr();
    obj=document.getElementById("select1");
    var tbody=document.getElementById("tbody1"); //得到TABLE中的TBODY
    var tr=document.createElement("tr"); // 根据不同需求新创建一个节点
    var td=document.createElement("td");
    var td2=document.createElement("td");
    tbody.insertBefore(tr); //将子项添加进去
    tr.appendChild(td);   
    tr.appendChild(td2);
    if(obj.value=="c"){ //说明是日期，将日期那行填上去
    td.innerHTML="日期";
    td2.innerHTML="<input type='text' value='"+obj.value+"' onfocusin='XXXX();'/>";
    }else{
    td.innerHTML="比较值";
    td2.innerHTML="<input type='text' value='"+obj.value+"' name='textfield' size='10'/>";
    }
    }
    function deletelasttr(){
    var tbody=document.getElementById("tbody1"); //得到TABLE中的TBODY
    tbody.deleteRow(2);
    }
    </script>
    </head>
    <table>
    <tbody id="tbody1"> 
    <tr> 
    <td> 查询条件 </td> 
    <td> 
    <select id="select1" name='selectName' style='width:120px' onchange="sonchange();"> 
    <option   value='a'> 代码 </option> 
    <option   value='b'> 企业名称 </option> 
    <option   value='c'> 日期 </option> 
    <option   value='d'> 确认选项 </option> 
    </select> 
    </td> 
    </tr>
    <tr>
    <td> 运算符 </td> 
    <td> <select   name='selectFh'   style='width:60px'> 
    <option   value='='> 等于 </option> 
    <option   value='!='> 不等于 </option> 
    <option   value='> ='> 大于等于 </option> 
    <option   value=' <='> 小于等于 </option> 
    <option   value='like'> 类似 </option> 
    <option   value='not   like'> 不类似 </option> 
    </select> </td> 
    </tr>
    <tr>
     <td>比较值</td>
     <td><input type='text' name='textfield'/></td>
    </tr> 
    </tbody>
    <tfoot>
    <tr>
    <td   style="CURSOR:   hand"   onclick="delRow('whereTable',this)"> 删除 </td>
    </tr>
    </tfoot>
    </table>
    </html>
    楼上的比我快一步.....我只用最复杂的不用最优秀的~哇哈哈
    我的是操作DOM模型,想写什么都在添加里的写就行了