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標(biāo)簽選項
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)站的支持！
您可能感興趣的文章:
- Bootstrap select多選下拉框?qū)崿F(xiàn)代碼
- bootstrap下拉列表與輸入框組結(jié)合的樣式調(diào)整
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap模塊dropdown實現(xiàn)下拉框響應(yīng)
- Bootstrap框架下下拉框select搜索功能
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap每天必學(xué)之級聯(lián)下拉菜單
- bootstrap中selectpicker下拉框使用方法實例
- Bootstrap中的Dropdown下拉菜單更改為懸停(hover)觸發(fā)
- IE11下CKEditor在Bootstrap Modal中下拉問題的解決
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)同步文本框內(nèi)容的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
tostring 和 valueOf 函數(shù)是解決值的顯示和運算的問題，本文主要介紹了js中toString()與valueOf()的使用，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了js實現(xiàn)拉幕效果的廣告代碼,涉及javascript定時操作頁面元素屬性變換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圓形進(jìn)度條拖拽滑動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript兩種axios取消請求方式小結(jié)
本文主要介紹了JavaScript兩種axios取消請求方式小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了JavaScript Date 知識，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
在layui中l(wèi)ayer彈出層點擊事件無效的解決方法
今天小編就為大家分享一篇在layui中l(wèi)ayer彈出層點擊事件無效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript設(shè)計模式 – 享元模式原理與用法實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 享元模式,結(jié)合實例形式分析了javascript享元模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
本篇文章主要是對js判斷60秒以及倒計時的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了Bootstrap入門書籍之（一）排版的相關(guān)資料,需要的朋友可以參考下2016-02-02