SelecT下拉框選中和取值的解決方法
Select下拉框的問題，想在選擇一個(gè)選項(xiàng)后，前臺顯示做出變動(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>男裝</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 事件會在域的內(nèi)容改變時(shí)發(fā)生。
onchange 事件也可用于單選框與復(fù)選框改變后觸發(fā)的事件。
selectedIndex: 設(shè)置或返回下拉列表中被選項(xiàng)目的索引號。
這樣，在我們改變選項(xiàng)時(shí)就會觸發(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="men">男裝</option> <option value="wemen">女裝</option> <option value="childe">童裝</option> <option value="yunfu">孕婦裝</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);
}
以上所述是小編給大家介紹的SelecT下拉框選中和取值的解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery 圖片查看器插件 Viewer.js用法簡單示例
這篇文章主要介紹了jQuery 圖片查看器插件 Viewer.js用法,結(jié)合簡單示例形式分析了jQuery 圖片查看器插件 Viewer.js的基本功能、調(diào)用方法及后臺數(shù)據(jù)調(diào)用處理技巧,需要的朋友可以參考下2020-04-04
jquery easyUI中ajax異步校驗(yàn)用戶名
這篇文章主要為大家詳細(xì)介紹了jquery easyUI中ajax異步校驗(yàn)用戶名，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了jQuery中 $("a").click()無效問題分析,需要的朋友可以參考下2015-01-01
jQuery Pagination分頁插件_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時(shí)無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因?yàn)榧虞d會比較慢。下面通過本文給大家分享jQuery Pagination分頁插件的使用方法及參數(shù)介紹，感興趣的朋友一起看看吧2017-07-07
jquery實(shí)現(xiàn)圖片無縫滾動(dòng) 蒙版遮蔽效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片無縫滾動(dòng)，蒙版遮蔽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
jquery 輸入框數(shù)字限制插件，需要的朋友可以參考下。2009-11-11
jQuery的選擇包含兩種，一種是選擇器，一種是篩選器。篩選器是對選擇器選定的jQuery對象做進(jìn)一步選擇;記下來將詳細(xì)介紹下篩選器children()感興趣的你可不要錯(cuò)過了哈，或許本文的知識點(diǎn)對你有所幫助2013-02-02
基于Jquery代碼實(shí)現(xiàn)支持PC端手機(jī)端幻燈片代碼
支持PC端手機(jī)端幻燈片代碼是一款支持移動(dòng)觸摸，支持鼠標(biāo)拖拽切換，支持帶進(jìn)度條的自動(dòng)播放模式，本文給大家分享一款基于jquery代碼實(shí)現(xiàn)支持pc端手機(jī)端幻燈片代碼，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jquery實(shí)現(xiàn)漂亮的二級下拉菜單代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)漂亮的二級下拉菜單代碼,涉及jquery鼠標(biāo)click事件控制頁面class屬性動(dòng)態(tài)變換效果的切換技巧,非常美觀實(shí)用,需要的朋友可以參考下2015-08-08
用jQuery實(shí)現(xiàn)的模仿a的title屬性的例子，在測試的時(shí)候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01