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 相关文章推荐
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
Jquery解析json字符串及json数组的方法
May 29 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php Smarty模板生成html文档的方法
2010/04/12 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
JS之小练习代码
2008/10/12 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
JS实现打字游戏
2019/12/17 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python获取微信企业号打卡数据并生成windows计划任务
2019/04/30 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python自动创建Excel并获取内容
2020/09/16 Python
什么是测试驱动开发(TDD)
2012/02/15 面试题
银行委托书范本
2014/04/04 职场文书
会计学习心得体会
2014/09/09 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014年教研工作总结
2014/12/06 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
高质量“欢迎词”
2019/04/03 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server