快捷導(dǎo)航

jquery獲取選中的文本和值的方法

更新時(shí)間：2014年07月08日 18:00:47 投稿：whsnow

這篇文章主要介紹了jquery獲取選中的文本和值的方法,需要的朋友可以參考下

1、說明

（1）獲取select下拉框選中的索引

$("#selection").get(0).selectedIndex;

（2）獲取select下拉框選中的值

$("#selection option:selected").val();

（3）獲取select下拉框選中的文本

$("#selection option:selected").text();

2、實(shí)現(xiàn)源碼

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"> 
<HEAD> 

<script type="text/javascript" src="../Documents/未命名站點(diǎn) 2/jquery-1.11.0.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("#btn").click(function(){ 
//獲取select下拉框索引 
var index = $("#selection").get(0).selectedIndex; 
//獲取select下拉框的值 
var selectVal = $("#selection option:selected").val(); 
//獲取select下拉框的文本 
var selectText = $("#selection option:selected").text(); 
alert("獲取select下拉框索引：" + index + "\n" + "獲取select下拉框的值：" + selectVal + "\n" + "獲取select下拉框的文本：" + selectText); 
}); 
}); 
</script> 

<DIV id=select_val> 
<SELECT id=selection> <OPTION selected value=0>鯉魚</OPTION> <OPTION value=1>鰩魚</OPTION> <OPTION value=2>鯰魚</OPTION> <OPTION value=3>棒棒魚</OPTION> <OPTION value=4>小姐魚</OPTION> <OPTION value=5>紅金花羅漢魚</OPTION> <OPTION value=6>彩虹王羅漢魚</OPTION> <OPTION value=7>泰金羅漢魚</OPTION></SELECT> 
</DIV> 
<INPUT id=btn value=獲取選中的文本和值 type=button>

3、實(shí)現(xiàn)結(jié)果

（1）選中第一項(xiàng)

（2）選中最后一項(xiàng)

選中文本

相關(guān)文章

jQuery EasyUI提交表單驗(yàn)證
這篇文章主要介紹了jQuery EasyUI提交表單驗(yàn)證的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-07-07
jQuery validate插件功能與用法詳解
這篇文章主要介紹了jQuery validate插件功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery validate插件的功能、參數(shù)、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-12-12
jQuery實(shí)現(xiàn)仿騰訊迷你首頁選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊迷你首頁選項(xiàng)卡效果代碼,可實(shí)現(xiàn)tab切換按鈕的左右滑動顯示及點(diǎn)擊切換效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁面元素動態(tài)操作技巧,需要的朋友可以參考下
2015-09-09
jquery常用函數(shù)與方法匯總
本篇文章給大家分享jquery常用的函數(shù)與方法，有需要的朋友一起來學(xué)習(xí)下
2015-09-09
Jquery表單驗(yàn)證失敗后不提交的解決方法
很多人可能都會遇到在調(diào)試的時(shí)候用了return了false，可為什么還會提交呢？這個(gè)問題我最近也碰到了，嘗試了多次也沒有用，后來終于發(fā)現(xiàn)了其中的問題，下面分享處理給大家，讓同樣遇到這個(gè)問題的朋友們能夠看看，有需要的朋友們下面來一起看看吧。
2016-10-10
基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼
基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果，其基本實(shí)現(xiàn)原理是這樣的：jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對jq點(diǎn)擊彈出層相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
jquery重復(fù)提交請求的原因淺析
jquery重復(fù)提交請求一般來說有兩個(gè)原因，一是沒有取消綁定；二是多次引用同一個(gè)js文件
2014-05-05
移動端jQuery修正Web頁面滑動時(shí)div問題的兩則實(shí)例
這篇文章主要介紹了移動端jQuery修正Web頁面滑動時(shí)div問題的兩則實(shí)例,分別針對頂部固定fixed不為0時(shí)滑動出現(xiàn)的閃動以及touchmove的受阻止的相關(guān)問題,需要的朋友可以參考下
2016-05-05
jQuery實(shí)現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)可拖拽的許愿墻效果,可實(shí)現(xiàn)拖拽圖片與層疊顯示功能,涉及jQuery插件的簡單使用,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-09-09
jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)的Accordion折疊面板效果代碼,通過jquery鼠標(biāo)click事件操作頁面元素樣式動態(tài)變換實(shí)現(xiàn)手風(fēng)琴折疊效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09