select隱藏選中值對應(yīng)的id,顯示其它id的簡單實現(xiàn)方法
更新時間：2016年08月25日 10:30:48 投稿：jingxian
下面小編就為大家?guī)硪黄猻elect隱藏選中值對應(yīng)的id,顯示其它id的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
由于select選項較少，做的簡單，
<select name="typeid" id="typeid">
<option value="-1">-請選擇類型-</option>
<option value="grade">兌換等級</option>
<option value="money">兌換現(xiàn)金</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存放一個數(shù)組中，然后遍歷隱藏所有id，只顯示選中值的id
以上這篇select隱藏選中值對應(yīng)的id,顯示其它id的簡單實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Cropper.js進階之裁剪后保存至服務(wù)器實現(xiàn)詳解
這篇文章主要為大家介紹了Cropper.js進階之裁剪后保存至服務(wù)器實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
原生JavaScript實現(xiàn)的簡單省市縣三級聯(lián)動功能示例
這篇文章主要介紹了原生JavaScript實現(xiàn)的簡單省市縣三級聯(lián)動功能,結(jié)合完整實例形式分析了javascript聯(lián)動菜單的實現(xiàn)方法,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
JavaScript實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標(biāo)的位置
這篇文章主要介紹了JavaScript實現(xiàn)手機號碼 3-4-4格式并控制新增和刪除時光標(biāo)的位置，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
本文主要介紹了webpack搭建腳手架打包TypeScript代碼，文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript性能優(yōu)化之函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）
這篇文章主要介紹了JavaScript性能優(yōu)化之函數(shù)節(jié)流（throttle）與函數(shù)去抖（debounce）的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
深入解析JavaScript中函數(shù)的Currying柯里化
這篇文章主要介紹了JavaScript中函數(shù)的Currying柯里化,Currying 的重要意義在于可以把函數(shù)完全變成"接受一個參數(shù)、返回一個值"的固定形式,需要的朋友可以參考下2016-03-03
javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實例形式分析了在不同場合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01
彈出模式化遮罩層的方法有很多，在本文為大家介紹下使用js實現(xiàn)最簡單的模式化遮罩層，具體如下，感興趣的朋友不要錯過2013-12-12
《javascript設(shè)計模式》學(xué)習(xí)筆記七：Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式詳解
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計組合模式,結(jié)合實例形式分析了《javascript設(shè)計模式》中Javascript面向?qū)ο蠼M合模式相關(guān)概念、原理、定義、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS計算網(wǎng)頁停留時間的具體實現(xiàn),需要的朋友可以參考下2014-04-04