分別使用javascript原生的方法和jquery方法
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、改則網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為改則等各大城市提供網(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:拿到選中項的索引:var index=myselect.selectedIndex ; // selectedIndex代表的是你所選中項的index
3:拿到選中項options的value: myselect.options[index].value;
4:拿到選中項options的text: myselect.options[index].text;
二:jquery方法(前提是已經(jīng)加載了jquery庫)
1:var options=$("#test option:selected"); //獲取選中的項
2:alert(options.val()); //拿到選中項的值
3:alert(options.text()); //拿到選中項的文本
參考以下兩種方法:
設(shè)置option的selected屬性為true
設(shè)置select標(biāo)簽的value值為需要選中的值
實例演示如下:
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的項選中"
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的選項選中
});
});
3、效果演示
參考如下代碼
$("select").val();??//?選中項目的value值
$("select?option:checked").text();?//?選中項目的顯示值
示例如下:
1.創(chuàng)建Html元素
請選擇:
select?id="sel"
option?value="1"選項1/option
option?value="2"選項2/option
option?value="3"選項3/option
option?value="4"選項4/option
/select
input?type="button"?value="點(diǎn)擊查看被選項目"
2.編寫jquery代碼
$(function(){
$("input").click(function()?{
a?=?$("#sel").val();
b?=?$("#sel?option:checked").text();
alert("被選項目的值:"+a+",被選項目的顯示值:"+b+"。");
});
})
3.顯示效果
當(dāng)前標(biāo)題:jquery下拉選中,jquery下拉框選中
文章出自:http://jinyejixie.com/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)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)