首頁(yè) 猿問(wèn) 我們可以使用 javascript...

我們可以使用 javascript 的 document.getElementById

JavaScript

SMILET 2021-06-01 18:38:05

我想使用 javascript 獲取下拉欄的默認(rèn)值。在下面的代碼中alert(document.getElementById("dropdown").selected)<select id="dropdown"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi" selected>Audi</option></select>展開(kāi)片段audi 選項(xiàng)默認(rèn)是下拉欄的選定值。在document.getElementById("drop-down").value=""我們的幫助下，我們可以獲得用戶(hù)選擇的值（比如 Saab），但我想獲得該特定下拉欄的默認(rèn)值（即奧迪）我嘗試使用document.getElementById("selement").selected 但它似乎不起作用無(wú)論用戶(hù)選擇什么，我都想獲得默認(rèn)值。我有兩個(gè)標(biāo)簽。第一個(gè)標(biāo)簽有這個(gè)下拉菜單。當(dāng)用戶(hù)移動(dòng)到下一個(gè)選項(xiàng)卡時(shí)，第一個(gè)選項(xiàng)卡中的下拉列表應(yīng)顯示默認(rèn)值（例如“選擇下面的任何選項(xiàng)”或在示例中為“奧迪”），但對(duì)我而言，下拉列表顯示用戶(hù)在更改選項(xiàng)卡之前選擇的那個(gè)。那么有沒(méi)有辦法通過(guò) JS 獲得“奧迪”的價(jià)值？

查看完整描述

3 回答

鴻蒙傳說(shuō)

TA貢獻(xiàn)1865條經(jīng)驗(yàn) 獲得超7個(gè)贊

在這個(gè)例子中，我們獲取defaultatDOMContentLoaded并存儲(chǔ)它。

let defaultValue;

document.addEventListener('DOMContentLoaded', () => {

defaultValue = document.querySelector('#selement').value;

});

document.addEventListener('change', (e) => {

if(e.target.matches('#selement')) {

console.log(`Default: ${defaultValue} - Selected: ${e.target.value}`);

}

});

<option value="volvo">Volvo</option>

</select>

假設(shè)完全控制 HTML：

注意：我們添加了一個(gè)data標(biāo)簽。

document.addEventListener('change', (e) => {

if(e.target.matches('#selement')) {

let defaultValue = e.target.querySelector('option[data-default="true"]').value;

console.log(`Default: ${defaultValue} - Selected: ${e.target.value}`);

}

});

<option value="volvo">Volvo</option>

</select>

再次假設(shè) HTML 控件，但對(duì)該data選項(xiàng)稍作調(diào)整。

document.addEventListener('change', (e) => {

if(e.target.matches('#selement')) {

console.log(`Default: ${e.target.dataset.default} - Selected: ${e.target.value}`);

}

});

<option value="volvo">Volvo</option>

</select>

反對(duì) 回復(fù) 2021-06-03

蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

只需使用value：

console.log(document.getElementById("selement").value);

<option value="volvo">Volvo</option>

</select>

反對(duì) 回復(fù) 2021-06-03

慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

您可以測(cè)試是否option使用選擇了一個(gè)元素.select，因此您可以遍歷所有選項(xiàng)并獲取所選元素的值，如下所示：

function getSelectedValue(dropDownId) {

var options = document.getElementById(dropDownId).children;

for (option of options) {

if (option.selected) {

return option.value;

}

dropDownId你的select元素的 id在哪里。

但是由于所選選項(xiàng)將被用戶(hù)更改，因此您可以在頁(yè)面加載腳本后立即將默認(rèn)所選選項(xiàng)的值存儲(chǔ)在變量中，例如一個(gè)簡(jiǎn)單的全局變量，例如 var defaultValue = getSelectedValue("my-drop-down");

反對(duì) 回復(fù) 2021-06-03