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脚本代码跑起来。
Jan 09 Javascript
JavaScript 10件让人费解的事情
Feb 15 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
ant design charts 获取后端接口数据展示
May 25 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 form 表单传参明细研究
2009/07/17 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
Angularjs自定义指令Directive详解
2017/05/27 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
Python基础之字典常见操作经典实例详解
2020/02/26 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
2015新年联欢晚会开场白
2014/12/14 职场文书
机动车交通事故协议书
2015/01/29 职场文书
辞职信如何写
2015/02/27 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
Python机器学习之逻辑回归
2021/05/11 Python