javascript下拉菜单问题,100分。

pptuzi 2008-01-29 11:46:27
有一个下拉菜单,里面有“日期”,有“确认选项”等几个值。
想选择“日期”的时候,下拉彩蛋后面的<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>
...全文
166 点赞 收藏 14
写回复
14 条回复
olivesoup 2008年01月31日
这也行,服了!
回复 点赞
pptuzi 2008年01月31日
结贴,谢谢大家
回复 点赞
小远 2008年01月30日
<!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模型,想写什么都在添加里的写就行了
回复 点赞
olivesoup 2008年01月30日
lz怎么问了问题就不见了,我们就在这眼巴巴的等着
回复 点赞
Rain 2008年01月30日
<!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>

显示的代码在这了.赋值的你应该会写的
回复 点赞
xql80329 2008年01月30日
5 6楼的方法 用的较多
display也可以实现
回复 点赞
guoqiangone 2008年01月30日
楼上,如果你有做过就把代码贴出来.
这种问题靠的抢时间,谁第一时间能把问题解决得分的几率就高.

OK

最近几天怎么看几个贴子就几个贴有冬瓜的份啊.搞得我都不好说什么了.
回复 点赞
zhangshuling 2008年01月30日
分都被你们抢光了.....,以上的也是本人观点哦,我做过的^-^
回复 点赞
J2eeFans 2008年01月30日
楼上说的方法比较好些,使用DIV控制方便些
回复 点赞
wulinbazhu 2008年01月29日
想说的都被"冬瓜"抢走了
回复 点赞
olivesoup 2008年01月29日
嗯,问题看明白了,确认几个地方
1。>当选择完“日期”或是确认选项的值后,把值给付到type='text'上
选完后,text已经隐藏掉了,你还要把值给他,是为了什么,把这个值提交上去?
还有这个值究竟是指什么值,选择“日期”,text里就放“日期”,选择“确认选项”,text里就放“确认选项”吗?

2。以上的内容是在一个 <tr> 下面的。可能需要多个行
既然是多行,那么每一行的select与text应该都有不同的name吧


先问清楚了我再帮你写
回复 点赞
shan1119 2008年01月29日
把判断要显示或者要隐藏的控件放到div里,然后控制div.
selectName.selectedIndex == 2;//日期
selectName.selectedIndex == 3;//确认选项
回复 点赞
lanzhengwu 2008年01月29日
对象的display属性,很简单的实现。。
回复 点赞
wafxl 2008年01月29日
强!顶!
回复 点赞
发动态
发帖子
Web 开发
创建于2007-09-28

5.2w+

社区成员

34.1w+

社区内容

Java Web 开发
社区公告
暂无公告