快捷導(dǎo)航

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

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

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

Select下拉框的問題，想在選擇一個(gè)選項(xiàng)后，前臺(tái)顯示做出變動(dòng)，并且知道選擇的是第幾個(gè)選項(xiàng)。

這個(gè)很好解決：

如下:

<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>所有申請(qǐng)商家</option>
<option>待審核商家</option>
<option>未通過審核商家</option>
<option>已通過審核商家</option>
</select>
</div>
</div>

JS:

function selectOnchang(obj){ 
//獲取被選中的option標(biāo)簽選項(xiàng) 
alert(obj.selectedIndex);
}

這里利用的就是onchange和selectedIndex。

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

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

這樣，在我們改變選項(xiàng)時(shí)就會(huì)觸發(fā)改事件。

效果如圖:

這樣做，我們只能獲得選中哪項(xiàng)，而如果我們選中哪項(xiàng)，需要傳遞特殊的信息，這個(gè)時(shí)候該怎么辦呢。

<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">所有申請(qǐng)商家</option>
<option value="check_pending">待審核商家</option>
<option value="no">未通過審核商家</option>
<option value="yes">已通過審核商家</option>
</select>
</div>
</div>

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

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

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

效果圖如下:

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

您可能感興趣的文章:

相關(guān)文章

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