BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展

更新時間：2016年11月22日 13:54:21 投稿：mrr

Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。怎么解決這個問題呢？下面小編給大家?guī)砹薆ootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展，需要的朋友參考下吧

Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。

這個很好解決：

如下:

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option>所有申請商家</option>
<option>待審核商家</option>
<option>未通過審核商家</option>
<option>已通過審核商家</option>
</select>
</div>
</div>

JS:

function selectOnchang(obj){ 
//獲取被選中的option標簽選項 
alert(obj.selectedIndex);
}

這里利用的就是onchange和selectedIndex。

onchange 事件會在域的內(nèi)容改變時發(fā)生。
onchange 事件也可用于單選框與復(fù)選框改變后觸發(fā)的事件。

selectedIndex: 設(shè)置或返回下拉列表中被選項目的索引號。

這樣，在我們改變選項時就會觸發(fā)改事件。

效果如圖:

這樣做，我們只能獲得選中哪項，而如果我們選中哪項，需要傳遞特殊的信息，這個時候該怎么辦呢。

<div class="page-header">
<div class="form-horizontal">
<div class="control-label col-lg-0">
</div>
<div class="col-lg-2">
<select class="form-control" onchange="selectOnchang(this)">
<option value="all">所有申請商家</option>
<option value="check_pending">待審核商家</option>
<option value="no">未通過審核商家</option>
<option value="yes">已通過審核商家</option>
</select>
</div>
</div>

也就是說，我在選中的同時，想獲得那個value值，這個時候怎么做。

這里只用一種方法實現(xiàn)，其他的方法應(yīng)該還有很多。

function selectOnchang(obj){ 
var value = obj.options[obj.selectedIndex].value;
alert(value);
}

效果圖如下:

以上所述是小編給大家介紹的BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

用JS實現(xiàn)一個簡單的打磚塊游戲
這篇文章主要介紹了用JS實現(xiàn)一個簡單的打磚塊游戲,代碼分為html+css+js三部分，具體實例代碼感興趣的朋友跟隨小編一起看看吧
2019-12-12
js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)
這篇文章主要介紹了js 下拉菜單點擊旁邊收起實現(xiàn)(踩坑記)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
ES6 Promise對象概念與用法分析
這篇文章主要介紹了ES6 Promise對象概念與用法,簡單分析了Promise對象的基本狀態(tài)與三種重要方法,并結(jié)合實例形式給出相關(guān)使用技巧,需要的朋友可以參考下
2017-04-04
小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案詳解
這篇文章主要介紹了小程序與內(nèi)嵌webview的數(shù)據(jù)交互方案,為實現(xiàn)H5頁面到小程序的無縫切換,技術(shù)方案包含使用webview交互,特別是低碼C端表單頁面的處理,需要的朋友可以參考下
2024-09-09
精通Javascript系列之數(shù)值計算
在JS中如果希望某個變量包含一個數(shù)值，那么無需限定其必須是整數(shù)或者是浮點數(shù)，下面來個例子
2011-06-06
Javascript頁面添加到收藏夾的簡單方法
這篇文章介紹了Javascript頁面添加到收藏夾的簡單方法，有需要的朋友可以參考一下
2013-08-08
JavaScript正則表達式校驗與遞歸函數(shù)實際應(yīng)用實例解析
這篇文章主要介紹了JavaScript正則表達式校驗與遞歸函數(shù)實際應(yīng)用,需要的朋友可以參考下
2017-08-08
JavaScript函數(shù)的使用詳解
這篇文章主要為大家介紹了JavaScript函數(shù)的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
微信瀏覽器下拉黑邊解決方案 wScroollFix
這篇文章主要介紹了微信瀏覽器下拉黑邊解決方案 wScroollFix,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-01-01
淺析Javascript的自動分號插入(ASI)機制
我們大家都知道在寫java和c時，必須要在語句后加分號，否則編譯通不過。而js不同，存在自動分好插入機制，下文簡稱ASI。它會給源代碼的 token 流自動插入分號。下面這篇文章我們就來談?wù)凧avascript的自動分號插入(ASI)機制。
2016-09-09