SelecT下拉框選中和取值的解決方法
更新時間：2016年11月22日 10:02:40 作者：big董
Select下拉框的問題，想在選擇一個選項后，前臺顯示做出變動，并且知道選擇的是第幾個選項。怎么解決這個問題呢？下面小編給大家分享SelecT下拉框選中和取值的解決方法，需要的朋友參考下吧
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="men">男裝</option> <option value="wemen">女裝</option> <option value="childe">童裝</option> <option value="yunfu">孕婦裝</option> </select> </div> </div>
也就是說，我在選中的同時，想獲得那個value值，這個時候怎么做。
這里只用一種方法實現(xiàn)，其他的方法應(yīng)該還有很多。
function selectOnchang(obj){
var value = obj.options[obj.selectedIndex].value;
alert(value);
}
以上所述是小編給大家介紹的SelecT下拉框選中和取值的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery獲取復(fù)選框選中的當(dāng)前行的某個字段的值
這篇文章主要介紹了jQuery獲取復(fù)選框選中的當(dāng)前行的某個字段的值,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了利用jQuery實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery彈出窗口完整代碼,可以實現(xiàn)窗口居中,居左,居右顯示，比較不錯，需要的朋友可以參考下2012-10-10
在jquery中給表單取值或賦值的方法我們只要簡單的$(\'表單ID\').val()即可實現(xiàn)取值了，如果賦值我們可使用$(\'表單ID\').val(\'內(nèi)容\')即可實現(xiàn)了2013-08-08
jqPlot是一款基于jquery類庫的圖標(biāo)繪制插件。通過jqPlot可以再網(wǎng)頁中繪制線狀、柱狀、餅狀等多種樣式圖表。而且，jqPlot具有插件可擴(kuò)展性(Pluggability)，你可以編寫自己的圖表樣式。2011-04-04
jQuery使用prepend()方法在元素前添加內(nèi)容用法實例
這篇文章主要介紹了jQuery使用prepend()方法在元素前添加內(nèi)容的方法,實例分析了prepend方法追加內(nèi)容的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄褂肑Query中的trim()方法去掉前后空格。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了jQuery表單域選擇器用法,實例分析了常見的表單元素選擇器的使用技巧,并給出了一個完整的實例總結(jié),需要的朋友可以參考下2015-02-02
jquery對象和DOM對象在使用過程很頻繁，正是因為如此，好多朋友都不知道它們之間有什么區(qū)別，下面為大家詳細(xì)介紹下，希望對大家有所幫助2013-08-08
比較常用的限制字符輸入數(shù)功能(比如熱火超天的微博輸入框),用jQuery和原生JavaScript分別寫了一個.原生JavaScript注釋中有區(qū)分中英文字符的函數(shù), 但個人并不建議這么做.2010-09-09