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

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

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供成安企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為成安眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

select id="test" name=""

option value="1"text1/option

option value="2"text2/option

/select

code:

一：javascript原生的方法

1:拿到select對(duì)象： 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庫(kù)）

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

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

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

jquery下拉列表選擇問(wèn)題

!DOCTYPE?HTML

html?lang="en-US"

head

meta?charset="UTF-8"

titlemenu/title

style?type="text/css"

/style

script?type="text/javascript"?src="jquery-1.8.0.min.js"/script

script?type="text/javascript"

$?(function?()

{

$?(":radio").change?(function?()

{

$("select:first").val($(this).val());

$("select:first").triggerHandler('change');

});

$("select:first").change?(function?()

{

var?index?=?$(this).children("option:selected").index();

if?(index?==?1)

{

$("select:last?option:nth-child(2n+1)").prop("selected",?false);

$("select:last?option:nth-child(2n)").prop("selected",?true);

}

else

{

$("select:last?option:nth-child(2n)").prop("selected",?false);

$("select:last?option:nth-child(2n+1)").prop("selected",?true);

}

})

})

/script

/head

body

table

tr

td*資質(zhì)版本/td

tdlabelinput?type="radio"?name="version"?value="old"?/舊版?/label?labelinput?type="radio"?name="version"?value="new"?/新版?/label

/td

/tr

tr

td*行業(yè)分類/td

tdselect?multiple="multiple"

option?value="old"舊版/option

option?value="new"新版/option

/select?select?multiple="multiple"

option建設(shè)工程企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程設(shè)計(jì)企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程勘察企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

option工程監(jiān)理企業(yè)資質(zhì)標(biāo)準(zhǔn)/option

/select

button搜索分類/button/td

/tr

/table

/body

/html

如何用jquery制作下拉列表

使用jQuery配合Superfish制作下拉菜單需要具備以下幾個(gè)參數(shù) 1、項(xiàng)目中需要有jQuery版本庫(kù)； 2、下載Superfish插件——Superfish； 3.需要把上面兩個(gè)js引入你的項(xiàng)目中 導(dǎo)入jQuery庫(kù)和Superfish插件 為了讓菜單一個(gè)默認(rèn)的樣式

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、效果演示