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

Select下拉框的問(wèn)題，想在選擇一個(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>未通過(guò)審核商家</option>
<option>已通過(guò)審核商家</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">未通過(guò)審核商家</option>
<option value="yes">已通過(guò)審核商家</option>
</select>
</div>
</div>

也就是說(shuō)，我在選中的同時(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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: