做了个下拉菜单中控制div显示或隐藏，但是放在里DIV就会无效果了，急求解决方法！
Yuyuquan 2016-09-03 06:44:13
<!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=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>下拉菜单中控制div显示或隐藏</title>
</head>

<body>
<div>
<table>

<tr>
<td width="9%" align="right" nowrap>车辆选择</td>
<td colspan="5" align="left">

<select name="vinchoose" id="vinchoose">
<option value="凯美瑞">凯美瑞</option>
<option value="雷凌">雷凌</option>
<option value="保时捷">保时捷</option>
<option value="雷诺">雷诺</option>
</select></td>
</tr>

<div>
<div id="d1" style = "">
<tr>
<td width="9%" align="right" nowrap>车辆昵称</td>
<td colspan="2"><input type="text" id="id"
value="${model.CAR_NICKNAME}" disabled></td>
<td width="9%" align="right" nowrap>VIN</td>
<td colspan="2"><input type="text" id="qd"
value="${model.VINNO}" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车牌号</td>
<td colspan="2"><input type="text" id="id"
value="${model.REGISTERNO}" disabled></td>
<td width="9%" align="right" nowrap>发动机号</td>
<td colspan="2"><input type="text" id="qd"
value="${model.VHCENGINE}" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车型</td>
<td colspan="2"><input type="text" id="id"
value="${model.VEHICLENAME}" disabled></td>
<td width="9%" align="right" nowrap>SFX</td>
<td colspan="2"><input type="text" id="qd" value="${model.SFX}"
disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车辆里程</td>
<td colspan="2"><input type="text" id="id"
value="${model.mileage}" disabled></td>
<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
<td colspan="2"><input type="text" id="qd"
value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled></td>
</tr>
</div>

<div id="d2" style="display:none;">
<tr>
<td width="9%" align="right" nowrap>车辆昵称</td>
<td colspan="2"><input type="text" id="id"
value="22222" disabled></td>
<td width="9%" align="right" nowrap>VIN</td>
<td colspan="2"><input type="text" id="qd"
value="22222" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车牌号</td>
<td colspan="2"><input type="text" id="id"
value="${model.REGISTERNO}" disabled></td>
<td width="9%" align="right" nowrap>发动机号</td>
<td colspan="2"><input type="text" id="qd"
value="${model.VHCENGINE}" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车型</td>
<td colspan="2"><input type="text" id="id"
value="${model.VEHICLENAME}" disabled></td>
<td width="9%" align="right" nowrap>SFX</td>
<td colspan="2"><input type="text" id="qd" value="${model.SFX}"
disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车辆里程</td>
<td colspan="2"><input type="text" id="id"
value="${model.mileage}" disabled></td>
<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
<td colspan="2"><input type="text" id="qd"
value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled></td>
</tr>
</div>

<div id="d3" style="display:none;">
<tr>
<td width="9%" align="right" nowrap>车辆昵称</td>
<td colspan="2"><input type="text" id="id"
value="333333" disabled></td>
<td width="9%" align="right" nowrap>VIN</td>
<td colspan="2"><input type="text" id="qd"
value="333333" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车牌号</td>
<td colspan="2"><input type="text" id="id"
value="${model.REGISTERNO}" disabled></td>
<td width="9%" align="right" nowrap>发动机号</td>
<td colspan="2"><input type="text" id="qd"
value="${model.VHCENGINE}" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车型</td>
<td colspan="2"><input type="text" id="id"
value="${model.VEHICLENAME}" disabled></td>
<td width="9%" align="right" nowrap>SFX</td>
<td colspan="2"><input type="text" id="qd" value="${model.SFX}"
disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车辆里程</td>
<td colspan="2"><input type="text" id="id"
value="${model.mileage}" disabled></td>
<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
<td colspan="2"><input type="text" id="qd"
value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled></td>
</tr>
</div>

<div id="d4"dd style="display:none;">
<tr>
<td width="9%" align="right" nowrap>车辆昵称</td>
<td colspan="2"><input type="text" id="id"
value="444444" disabled></td>
<td width="9%" align="right" nowrap>VIN</td>
<td colspan="2"><input type="text" id="qd"
value="44444" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车牌号</td>
<td colspan="2"><input type="text" id="id"
value="${model.REGISTERNO}" disabled></td>
<td width="9%" align="right" nowrap>发动机号</td>
<td colspan="2"><input type="text" id="qd"
value="${model.VHCENGINE}" disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车型</td>
<td colspan="2"><input type="text" id="id"
value="${model.VEHICLENAME}" disabled></td>
<td width="9%" align="right" nowrap>SFX</td>
<td colspan="2"><input type="text" id="qd" value="${model.SFX}"
disabled></td>
</tr>
<tr>
<td width="9%" align="right" nowrap>车辆里程</td>
<td colspan="2"><input type="text" id="id"
value="${model.mileage}" disabled></td>
<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
<td colspan="2"><input type="text" id="qd"
value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled></td>
</tr>
</div>
</div>
</table>
<div>

<script type="text/javascript">

var dd="";
var map = {"凯美瑞":"d1", "雷凌":"d2", "保时捷":"d3","雷诺":"d4"};
$("#vinchoose").bind("change", function(){
var divId = map[this.value];
document.getElementById("d1").style.display="none";
document.getElementById(divId).style.display="";
if(dd!=""){
if(dd!=divId){
document.getElementById(dd).style.display="none";
}
}
dd=divId;
}
);
</script>
</body>
</html>
...全文
228 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Yuyuquan 2016-09-03
  • 打赏
  • 举报
 回复
好的！谢谢，帮我大忙了，感激！
天际的海浪 2016-09-03
  • 打赏
  • 举报
 回复 

<table>
	<thead>
		<tr>
			<td width="9%" align="right" nowrap>车辆选择</td>
			<td colspan="5" align="left">
				<select name="vinchoose" id="vinchoose">
					<option value="凯美瑞">凯美瑞</option>
					<option value="雷凌">雷凌</option>
					<option value="保时捷">保时捷</option>
					<option value="雷诺">雷诺</option>
				</select>
			</td>
		</tr>
	</thead>
	<tbody id="d1" style="">
		<tr>
			<td width="9%" align="right" nowrap>车辆昵称</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.CAR_NICKNAME}" disabled>
			</td>
			<td width="9%" align="right" nowrap>VIN</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.VINNO}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车牌号</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.REGISTERNO}" disabled>
			</td>
			<td width="9%" align="right" nowrap>发动机号</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.VHCENGINE}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车型</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.VEHICLENAME}" disabled>
			</td>
			<td width="9%" align="right" nowrap>SFX</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.SFX}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车辆里程</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.mileage}" disabled>
			</td>
			<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled>
			</td>
		</tr>
	</tbody>
	<tbody id="d2" style="display:none;">
		<tr>
			<td width="9%" align="right" nowrap>车辆昵称</td>
			<td colspan="2">
				<input type="text" id="id" value="22222" disabled>
			</td>
			<td width="9%" align="right" nowrap>VIN</td>
			<td colspan="2">
				<input type="text" id="qd" value="22222" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车牌号</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.REGISTERNO}" disabled>
			</td>
			<td width="9%" align="right" nowrap>发动机号</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.VHCENGINE}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车型</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.VEHICLENAME}" disabled>
			</td>
			<td width="9%" align="right" nowrap>SFX</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.SFX}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车辆里程</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.mileage}" disabled>
			</td>
			<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled>
			</td>
		</tr>
	</tbody>
	<tbody id="d3" style="display:none;">
		<tr>
			<td width="9%" align="right" nowrap>车辆昵称</td>
			<td colspan="2">
				<input type="text" id="id" value="333333" disabled>
			</td>
			<td width="9%" align="right" nowrap>VIN</td>
			<td colspan="2">
				<input type="text" id="qd" value="333333" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车牌号</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.REGISTERNO}" disabled>
			</td>
			<td width="9%" align="right" nowrap>发动机号</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.VHCENGINE}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车型</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.VEHICLENAME}" disabled>
			</td>
			<td width="9%" align="right" nowrap>SFX</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.SFX}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车辆里程</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.mileage}" disabled>
			</td>
			<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled>
			</td>
		</tr>
	</tbody>
	<tbody id="d4" dd style="display:none;">
		<tr>
			<td width="9%" align="right" nowrap>车辆昵称</td>
			<td colspan="2">
				<input type="text" id="id" value="444444" disabled>
			</td>
			<td width="9%" align="right" nowrap>VIN</td>
			<td colspan="2">
				<input type="text" id="qd" value="44444" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车牌号</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.REGISTERNO}" disabled>
			</td>
			<td width="9%" align="right" nowrap>发动机号</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.VHCENGINE}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车型</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.VEHICLENAME}" disabled>
			</td>
			<td width="9%" align="right" nowrap>SFX</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.SFX}" disabled>
			</td>
		</tr>
		<tr>
			<td width="9%" align="right" nowrap>车辆里程</td>
			<td colspan="2">
				<input type="text" id="id" value="${model.mileage}" disabled>
			</td>
			<td width="9%" align="right" nowrap>车辆里程最近更新时间</td>
			<td colspan="2">
				<input type="text" id="qd" value="${model.UPDATE_YEAR}-${model.UPDATE_MONTH}" disabled>
			</td>
		</tr>
	</tbody>
</table>
天际的海浪 2016-09-03
  • 打赏
  • 举报
 回复
表格的table 与 tr和td之间不能插入div 你可以改用 tbody 标签
三级下拉菜单联动实战案例
介绍了JS实现中国地区三级联动下拉菜单功能，结合完整实例分析了javascript基于事件响应实现页面元素动态变换的相关操作技巧，需要的朋友可以参考下 方法01：纯前端（展现+数据）方法02：前端（展现）+后端（数据） ...
html div表格代码,<Table>
html表格标签 进修DIV CSS回头再来深造Table表格标签组合就相比容易。再借助DW软件构造TABLE表格更为方便随心所欲。一、html表格语法1、根本table tr td结构代码模式1.1模式1.2形式2.1模式2.2table tr td表格示例代码根抵结构造诣截图2、根底table tr th td组合代码结构代码序号标题问题日期1标题称呼2016-12-202CSS52016-12-19html表...
h5学习笔记： 下拉菜单
鼠标经过菜单的时候，下拉菜单形成起来。这个案例中，有一些比较有趣的事情。首先要了解这种菜单设计结构。我们知道ul+li经常组合列表，这种列表既有纵向，也有横向。列表中的li元素，再包一个ul+li的组合元素。这样一个列表下拉菜单结构就变得很清晰了。
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明： 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到“最新动态页”或“帮助查询”菜单上时，其二级菜单滑入显示 当鼠标从“最新动态页”或“帮助查询”菜单上移出时，其二级菜单滑出隐藏 实现思路： 新建 HTML 页面，在页面上使用无序列表显示一级菜单 在“最新动态页”和“帮助查询”菜单中加入二级菜单，二级菜单默认状态为隐藏 当鼠标悬浮在一级菜单上时，菜单的背景色变为红色，字体颜色变为白色 为一级菜单的鼠标
在空白处点击，实现隐藏div(下拉菜单或其它弹框)的方法
一个小需求的实现，有时候我们点击网站页面的一个下拉菜单按钮，可能要再次点击那个按钮才能使下拉菜单消失，这里要实现的需求是在其他地方（除下拉菜单和按钮以外的地方）点击也要使下拉菜单消失，这样做可以提高用户体验度。         这里是实现的一个方案，当然方案很多，这里只介绍我用的一种。我们知道前端静态页面的实现最基本的就是DOM树，我们的方案也是基于查询DOM节点的。下拉菜单出现后，我们再次点击
JavaScript

87,922

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章