如何用JS選中下拉框選項

1、打開vscode，創(chuàng)建一個H5規(guī)范的頁面，用于演示js如何給下拉框設(shè)置默認(rèn)值。

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

2、在頁面中添加一個下拉框，并在html中通過selected屬性，默認(rèn)選擇下拉框的第2個值。

3、在瀏覽器中打開頁面，就可以看到這個下拉框默認(rèn)選中的第二個下拉值。

4、在頁面頂部引入jquery，由于本文將jquery和頁面放在同一級目錄，所以，直接使用了jquery文件名引用。如果不在同一級目錄，引入的路徑需要有層級。

5、在頁面底部，添加jquery代碼，使用.val()方法，在頁面文檔加載后，就馬上修改下拉框的默認(rèn)選中值為第三個值。此時是不管html的標(biāo)簽中selected屬性原來是標(biāo)記在哪一個選項的，都會改成新的值。

6、在瀏覽器中打開頁面，這個時候就會看到，下拉框的默認(rèn)值已經(jīng)變成了第三個選項。

7、如果想要通過下拉框的顯示值來設(shè)置默認(rèn)選中項，就需要使用類似下面的語法：

$("#sltDef").find("option:contains('第4個選項')").attr("selected", true);

用javascript怎么取下拉列表的值

對于單選下拉列表，value屬性可以直接獲取其選中項的value值。

下面實例演示——單擊按鈕獲取下拉列表選中項的value值：

1、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

option?value="4"option-4/option

/select?br

input?type='button'?value='獲取選中項'?onClick="fun()"/

2、javascript代碼

function?fun(){

obj?=?document.getElementById("test");

alert(obj.value);

}

3、效果演示

如何在js中下拉列表選中某個值？

select name="r_house" id="r_house"

option value="選項1"選項1/option

option value="選項2" selected選項2/option!--如果想直接在html中選定某項，給該項加個selected屬性即可，不需要編程--

option value="選項3"選項3/option

option value="選項4"選項4/option

option value="選項5"選項5/option

option value="選項6"選項6/option

/select

script

window.onload=function(){

//如果一定要js代碼實現(xiàn)，可以這樣：

//方法一（假定選定第3項，下同）：

r_house.value="選項3";

//方法二：

r_house.options[2].selected=true;

//方法三：

r_house.children[2].selected=true;

//方法四：

r_house.getElementsByTagName("option")[2].selected=true;

//方法五：

r_house.querySelectorAll("option")[2].selected=true;

//還有N多種方法此略

}

/script