下拉框选中值对应切换内容的效果

最新推荐文章于 2025-05-05 22:12:18 发布
最新推荐文章于 2025-05-05 22:12:18 发布
阅读量5.2k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： HTML jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_27918787/article/details/52426544
本文介绍了一个使用jQuery实现的下拉菜单切换显示案例。通过选择不同的车辆型号，表格会显示对应型号的详细信息，包括车辆昵称、VIN码、车牌号等。此案例展示了如何利用JavaScript和HTML结合实现动态内容展示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>下拉菜单中控制显示或隐藏</title>
</head>
<body>
<form>
<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="1" 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="2" 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>
	</form>	
<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>
注意：使用div做的话则不能放在<table>中，所以使用<tbody>来实现效果
动态切换下拉框的值，页面变化
baidu_15030925的博客
02-23 1444
流程名称： class="chosen-select-no-single" data-placeholder="请选择">   青的 黄的 $("#rootNode").change(function(){ rootNodeCode = $(this).children('option:selected').val(); if(rootNodeCode !="
select下拉框点击其中一个内容，触发切换事件
what_error的博客
01-16 6610
html: 受捐状态 id="status" onchange="$('#op_search').click()"> 未接受 已接受 js: $(document).ready(function() { $("select").multiselect(); //搜索 $("#op_search").click(function() { search_name =
选择不同的下拉框跳到不同的页面
03-31
选择不同的下拉框跳到不同的页面，使用JavaScript实现的下拉框跳到不同页面效果！
html在下拉跳转框实现页面跳转/button点击实现页面跳转
qq_61549190的博客
11-03 1448
这里我定义了国籍可以跳转到新的网页界面,实际情况可以更改。1.可以考虑运用窗口定义需要打开的页面。
Jquery实现下拉框与输入框动态切换，类似可编辑的下拉框
weixin_34023982的博客
06-15 1268
2019独角兽企业重金招聘Python工程师标准>>> ...
下拉菜单之变换菜单实现
Always on the road
05-30 444
（此为慕课学习笔记，方便日后学习）&lt;html lang="en"&gt; &lt;!-- 学习功能：下拉菜单之变幻菜单 author: lisa于2018-5-30 --&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&quo
JavaScript实现点击文本自动定位到下拉框选中操作
10-22
主要介绍了JavaScript实现点击文本自动定位到下拉框选中操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用js实现下拉框跳转和下拉框选择图片
12-25 818
下拉框跳转 MP3音乐下载 中国音乐网 九天音乐网 下拉框选择图片 看看图片1 看看图片2 看看图片3 看看图片4
关于下拉框切换取值的例子
r1799627886的博客
06-12 1260
1，对面2个相关联的下拉框有联系的查询切换的JS代码 效果如下 先看JSP代码 所属楼栋: --请选择-- ${b.BUILDING_NAME }
html下拉列表jq切换内容,jquery实现网站列表切换效果的2种方法
weixin_42300317的博客
06-04 363
本文实例为大家分享了jquery实现网站列表切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下效果图：网站品牌列表切换效果*{margin: 0px;padding: 0px;}a{color: black;text-decoration: none;}a:hover{color: brown;}.box{width: 600px;min-height:200px ;border: 1px...
JS动态修改下拉框中的元素
浩瀚星空，法力无边；其大无外，其小无内。
02-07 2289
 假设下拉框叫selectName清空：selectName.length=0;增加：selectName.options[selectName.length]=new Option(text,value);删除：selectName.options[n]=null;应用当中，删除完了往往会在后面加上一句selectName.click;用以刷新。否则下拉框停留在被删除
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
weixin_43937851的博客
08-10 3914
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
利用jQuery 实现多选标签下拉框，提升表单交互体验
Z09111616的博客
05-05 953
通过 HTML、CSS 和 jQuery 的结合，我们成功实现了一个功能完备、交互友好的多选标签下拉框。这种设计不仅提升了表单的美观性和操作便捷性，还能适应多种业务场景的多选需求。开发者可以根据实际项目需要，对标签数据、样式和功能进行进一步的扩展与优化，为用户带来更好的使用体验。
使用axure实现点击下拉列表框中任意一个选项时，触发（联动）该选项需要查看的内容，隐藏其他内容
热门推荐
xdh19940602的博客
07-18 7万+
1.在一个新建的项目模型里，在图形库选中下拉列表框，拖到空白处，如下所示：  2.编辑列表选项：双击下拉列表框，为列表框添加相应的选项（可单个添加也可选择一次性添加），这里举例子以网点为例，其他子选项添加方式类似，效果如下：    预览查看效果，下拉框中添加选项成功。（如果想要使得选项居中，在添加选项的时候可以使用空格） 3.要使得我们点击下拉框中的某个子选项时，在空白位置显示出相...
新增后如需修改，如何让下拉框的值默认显示对应的值的方法
miyako的博客
09-19 3718
首先来个下拉框 html 使用单位： &amp;amp;amp;lt;select name=&amp;amp;quot;unitId&amp;amp;quot; id=&amp;amp;quot;unitId&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;option value=&amp;amp;quot;&amp;amp;quot;&amp;amp;amp;g
实现两个select下拉框内容切换
量子前端的博客
06-28 1779
这个小案例用到了节点操作，事件定义的知识点，效果如图所示： 实现方法也很简单，在js定义四个按钮点击事件，把遍历select出来的子节点改变它们的父节点就可以实现。 代码： <body> <select id = 'all' multiple="multiple"> <option>苹果</option> <option>西瓜</option> <option>梨</option> <o
vue点击下拉框选择不同选项出现不同内容--接口对接数据变换
weixin_43312391的博客
01-24 8617
实现效果： 点击下拉框的三种选项，左侧通过后端传递的数值会发生变化，右侧的名称会变成下拉选项的名称。 1.tempalte中 <LittleTitle name="空天数据系统" /> <div class="sky-top"> <el-select v-model="skyDataType"> <el-option v-for="it
下拉菜单显示和隐藏之间的切换
龙文浩的博客
07-11 1286
开发工具与关键技术：VS/C# 作者：龙文浩 撰写时间：2019/07/11 基于CSS的导航栏的布局，见截图： 首先布局“你好，请登录”、“免费注册”、“我的订单”、“商城会员”，然后设置Style的样式，如：margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值，分别为上边距、右边距、下边距、左边距；属性值有auto: 计算外边距。即（length规定以具体单位计的外边距...
墨刀下拉框选中第二个切换动态面板状态为状态二
最新发布
08-06
在墨刀中实现"下拉框选中第二个选项时切换动态面板状态"的功能，需要按照以下步骤操作： #### 步骤1：准备组件 1. 添加下拉框组件 - 从左侧组件库拖入"下拉选择"组件 - 在右侧属性面板设置选项（至少两个选项） ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值