select隐藏选中值对应的id,显示其它id的简单实现方法


Posted in Javascript onAugust 25, 2016

由于select选项较少,做的简单,

<select name="typeid" id="typeid">
<option value="-1">-请选择类型-</option>
<option value="grade">兑换等级</option>
<option value="money">兑换现金</option>
<option value="gift">兑换礼物</option>
</select>


<tr id="grade"></tr>

<tr id="money"></tr>


<tr id="gift"></tr>


<script>
$(document).ready(function(){
var alltypes = ['grade','money','gift'];
$("#typeid").change(function(){
var type = $(this).val();
for(i=0;i<alltypes.length;i++)
{
$("#"+alltypes[i]).hide();
$("#"+type).show();
}

});
});
</script>

将所有id存放一个数组中,然后遍历隐藏所有id,只显示选中值的id

以上这篇select隐藏选中值对应的id,显示其它id的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 #Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 #Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 #Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 #Javascript
jquery点击切换背景色的简单实例
Aug 25 #Javascript
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
JavaScript延迟加载
2021/03/09 Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python字符串格式化
2015/06/15 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
在python中做正态性检验示例
2019/12/09 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
python程序输出无内容的解决方式
2020/04/09 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
个人实用简单的自我评价
2013/10/19 职场文书
煤矿班组长竞聘书
2014/03/31 职场文书
会议新闻稿
2015/07/17 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL