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

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

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、改則網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為改則等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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ù)演示需要，給出一個示例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()?{??//?第一個按鈕單擊事件

$("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()?{?//?第二個按鈕的單擊事件

$("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.顯示效果

當(dāng)前標(biāo)題：jquery下拉選中,jquery下拉框選中
文章出自：http://www.rwnh.cn/article32/dssojpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站制作、企業(yè)建站、微信公眾號、動態(tài)網(wǎng)站、搜索引擎優(yōu)化

廣告

聲明：本網(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)