如何獲取下拉列表選中的值 jquery

分別使用javascript原生的方法和jquery方法

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司10多年經(jīng)驗(yàn)成就非凡，專業(yè)從事做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)，成都網(wǎng)頁設(shè)計(jì)，成都網(wǎng)頁制作，軟文發(fā)布平臺，一元廣告等。10多年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：028-86922220，我們期待您的來電！

select id="test" name=""

option value="1"text1/option

option value="2"text2/option

/select

code:

一：javascript原生的方法

1:拿到select對象： var myselect=document.getElementById("test");

2：拿到選中項(xiàng)的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所選中項(xiàng)的index

3:拿到選中項(xiàng)options的value： myselect.options[index].value;

4:拿到選中項(xiàng)options的text： myselect.options[index].text;

二：jquery方法（前提是已經(jīng)加載了jquery庫）

1:var options=$("#test option:selected"); //獲取選中的項(xiàng)

2:alert(options.val()); //拿到選中項(xiàng)的值

3:alert(options.text()); //拿到選中項(xiàng)的文本

jquery怎么設(shè)置下拉列表被選中

參考以下兩種方法：

設(shè)置option的selected屬性為true

設(shè)置select標(biāo)簽的value值為需要選中的值

實(shí)例演示如下:

1、根據(jù)演示需要，給出一個(gè)示例HTML結(jié)構(gòu)

select?id="test"

option?value="1"option-1/option

option?value="2"option-2/option

option?value="3"option-3/option

/selectbr

input?type="button"?id="btn1"?value="設(shè)置option-2選中"

input?type="button"?id="btn2"?value="設(shè)置value=3的項(xiàng)選中"

2、jquery代碼

$(function(){

//?方法1：設(shè)置option的selected屬性為true

$("#btn1").click(function()?{??//?第一個(gè)按鈕單擊事件

$("select?option").each(function()?{?//?遍歷所有option，如果option內(nèi)容為option-2，就設(shè)置起selected屬性為true

if($(this).text()=="option-2")

$(this).prop("selected",true);

});

});

//?方法2：設(shè)置select標(biāo)簽的value值為需要選中的值

$("#btn2").click(function()?{?//?第二個(gè)按鈕的單擊事件

$("select").val("3");??//?設(shè)置option值為3的選項(xiàng)選中

});

});

3、效果演示

用jquery怎么判斷下拉框選中的值

參考如下代碼

$("select").val();??//?選中項(xiàng)目的value值

$("select?option:checked").text();?//?選中項(xiàng)目的顯示值

示例如下：

1.創(chuàng)建Html元素

請選擇：

select?id="sel"

option?value="1"選項(xiàng)1/option

option?value="2"選項(xiàng)2/option

option?value="3"選項(xiàng)3/option

option?value="4"選項(xiàng)4/option

/select

input?type="button"?value="點(diǎn)擊查看被選項(xiàng)目"

2.編寫jquery代碼

$(function(){

$("input").click(function()?{

a?=?$("#sel").val();

b?=?$("#sel?option:checked").text();

alert("被選項(xiàng)目的值："+a+"，被選項(xiàng)目的顯示值："+b+"。");

});

})

3.顯示效果

分享名稱：jquery下拉選中,jquery下拉框默認(rèn)選中
當(dāng)前地址：http://chinadenli.net/article24/dseeeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、品牌網(wǎng)站設(shè)計(jì)、做網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站策劃、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)