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

最新推荐文章于 2022-08-10 00:23:19 发布
最新推荐文章于 2022-08-10 00:23:19 发布
阅读量5.1k 收藏 2
点赞数 3
分类专栏： web前端 文章标签： HTML jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27918787/article/details/52426544
版权 
<!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>来实现效果
Yuyuquan
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
select下拉框点击其中一个内容，触发切换事件
what_error的博客
01-16 6406
html: 受捐状态 id="status" onchange="$('#op_search').click()"> 未接受 已接受 js: $(document).ready(function() { $("select").multiselect(); //搜索 $("#op_search").click(function() { search_name =
select下拉菜单修改显示的内容
miss_jing18的博客
05-15 7970
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;下拉菜单修改DIV显示的内容&lt;/title&gt; &lt;/head&gt; &lt;scri
JS动态修改下拉框中的元素
浩瀚星空，法力无边；其大无外，其小无内。
02-07 2209
 假设下拉框叫selectName清空：selectName.length=0;增加：selectName.options[selectName.length]=new Option(text,value);删除：selectName.options[n]=null;应用当中，删除完了往往会在后面加上一句selectName.click;用以刷新。否则下拉框停留在被删除
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
weixin_43937851的博客
08-10 3380
element-ui 表单中，下拉框选中某个值后，同步更新其他输入框的值
根据一个下拉框改变另外一个下拉框内容
热门推荐
lier的博客
06-27 1万+
一、前言 在编写网页的时候，有时候需要用到多重内容选择，例如先选择省市，再选择县镇等过程。这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容，希望能对大家有所帮助。 二、实现思路 定义两个select选择框，在js脚本中设置第一个下拉框的onchange函数，点击时删除第二个下拉框原有的内容并添加新的内容。 三、HTML+JS源代码 <!DOCTYPE html> &lt...
通过select下拉框切换内容
qq_45541930的博客
11-15 2412
点击select实现不同盒子显示与隐藏（常用js与jequery方法） 通过select下拉菜单，实现切换盒子中的显示内容 <select name="" id="" onclick="select_event(this.options[this.selectedIndex].value);"> <option value="mapselect" selected>地图</option> <option value="listsele
实现两个select下拉框内容切换
量子前端的博客
06-28 1718
这个小案例用到了节点操作，事件定义的知识点，效果如图所示： 实现方法也很简单，在js定义四个按钮点击事件，把遍历select出来的子节点改变它们的父节点就可以实现。 代码： <body> <select id = 'all' multiple="multiple"> <option>苹果</option> <option>西瓜</option> <option>梨</option> <o
jQuery模拟下拉框选择对应菜单的内容
10-20
注意，这个示例假设了每种课程内容都有一个与`<li>`元素`value`属性相匹配的ID，以便正确地切换内容。 总结来说，使用jQuery模拟下拉框选择菜单是一种常见的前端开发技术，通过结合HTML、CSS和JavaScript，可以创建...
JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动
03-22
标题中的“JS实现左边的下拉框内容移动到右边下拉框，支持内容上下移动”是一个常见的前端交互功能，常用于表单或者过滤选择场景。这个功能涉及到JavaScript的基础知识，DOM操作，事件处理以及可能的AJAX技术。下面...
C#005下拉框的应用
07-24
- 使用`DisplayMember`和`ValueMember`属性，可以分别设置显示的文本和对应的值，便于处理数据。 7. 进阶应用： - 通过继承或自定义`ComboBox`，可以扩展其功能，例如添加分组、嵌套列表等功能。 - 结合MVVM模式...
下拉框选择事件动态加载echart数据
01-22
在这个过程中，`fetch`函数用于发送异步请求，获取与下拉框选项相对应的ECharts数据。`updateChart`函数则接收新的数据，清空当前图表并设置新的配置项，最后调用`myChart.setOption`方法更新图表。 在ECharts中，...
textarea_useto_select.rar_javascript_下拉框
09-21
这段代码会监听Select元素的change事件，当用户改变选择时，获取当前选中的选项值，并将其设置为Textarea的值。 “www.pudn.com.txt”文件可能是从pudn.com网站上获取的资料说明或链接，可能提供了关于这个示例的更...
更改下拉列表中值
guoyaxu的专栏
07-06 265
js 代码   &lt;script type="text/javascript"&gt;   var shenyang= new Array("东北大学","辽宁省劳动经济学校","辽宁大学");   var dalian=new Array("大连理工大学","大连大学");     function _setval(n)  
JavaScript高级编程II
mydeman的学习日志
08-23 5947
     原文地址： http://www.onlamp.com/pub/a/onlamp/2007/08/23/advanced-javascript-ii.html?page=1        在前面的文章中，我们介绍了两类JavaScript小工具及其源码：浮动文本和弹出菜单。本文中，我们将继续介绍另外几个有用的JavaScript小工具，并着重说明其工作原理，因此你可以简单修改后应用到自己
vue+el-ui实现el-table单元格，默认显示文字，点击时切换成下拉框，下拉框选中的值呈现在这个单元格中
最新发布
06-03
实现这个功能可以通过以下步骤： 1. 在 el-table 中需要显示下拉框的列中，设置 type 属性为 'selection'，并且设置 selectable 属性为 true，这样列的单元格就会显示为下拉框。 2. 在 el-table 中的数据源中，为需要显示下拉框的列添加一个 options 字段，用于存放下拉框选项的值。 3. 使用 slot-scope 插槽，为需要显示下拉框的列的单元格添加一个自定义模板，模板中包含一个下拉框组件 el-select 和一个显示选中值的文本框。 4. 在 el-select 的 change 事件中，将选中的值赋给数据源中对应的项的值，并且设置一个变量来标识当前单元格是否是下拉框状态。 以下是示例代码： ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <<el-table-column prop="gender" label="性别" type="selection" selectable> <template slot-scope="{ row }"> <div v-if="!row.isDropdown"> {{ row.gender }} <i class="el-icon-arrow-down" @click="toggleDropdown(row)"></i> </div> <div v-else> <el-select v-model="row.gender" @change="changeGender(row)"> <el-option v-for="option in row.options" :key="option" :label="option" :value="option"></el-option> </el-select> </div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, gender: '男', options: ['男', '女'], isDropdown: false }, { name: '李四', age: 30, gender: '女', options: ['男', '女'], isDropdown: false }, { name: '王五', age: 40, gender: '男', options: ['男', '女'], isDropdown: false }, ] } }, methods: { toggleDropdown(row) { row.isDropdown = true; }, changeGender(row) { row.isDropdown = false; } } } </script> ``` 在这个示例中，我们使用了一个 isDropdown 属性来标识当前单元格是否是下拉框状态，初始值为 false。当用户点击单元格中的箭头图标时，会触发 toggleDropdown 方法，将 isDropdown 属性设置为 true，这样单元格会显示下拉框组件。当用户在下拉框中选中了一个值后，会触发 changeGender 方法，将选中的值赋给数据源中对应的项的 gender 属性，并且将 isDropdown 属性设置为 false，这样单元格会显示选中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值