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
Mar 09 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
vue 授权获取微信openId操作
Nov 13 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
php&amp;java(二)
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue实现移动端页面切换效果【推荐】
2018/11/13 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
vue实现购物车列表
2020/06/30 Javascript
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
Shopbop中文官网:美国亚马逊旗下时尚购物网站
2020/12/15 全球购物
公务员培训自我鉴定
2014/02/01 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
员工安全责任书范本
2014/07/24 职场文书
初婚未育证明样本
2015/06/18 职场文书
2016高一新生军训心得体会
2016/01/11 职场文书
九年级数学教学反思
2016/02/17 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Vue操作Storage本地化存储
2022/04/29 Vue.js
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript