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 相关文章推荐
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
js函数和this用法实例分析
Mar 13 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 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
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
浅析is_writable的php实现
2013/06/18 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
php异常处理方法实例汇总
2015/06/24 PHP
PHP单例模式详细介绍
2015/07/01 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
增大python字体的方法步骤
2020/07/05 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
C语言面试题
2015/10/30 面试题
《植物妈妈有办法》教学反思
2014/02/25 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
感谢信范文大全
2015/01/23 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
Python turtle实现贪吃蛇游戏
2021/06/18 Python