我们可以使用 javascript 的 document.getElementById

Question

我想使用 javascript 获取下拉栏的默认值。在下面的代码中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>展开片段audi 选项默认是下拉栏的选定值。在document.getElementById("drop-down").value=""我们的帮助下，我们可以获得用户选择的值（比如 Saab），但我想获得该特定下拉栏的默认值（即奥迪）我尝试使用document.getElementById("selement").selected 但它似乎不起作用无论用户选择什么，我都想获得默认值。我有两个标签。第一个标签有这个下拉菜单。当用户移动到下一个选项卡时，第一个选项卡中的下拉列表应显示默认值（例如“选择下面的任何选项”或在示例中为“奥迪”），但对我而言，下拉列表显示用户在更改选项卡之前选择的那个。那么有没有办法通过 JS 获得“奥迪”的价值？

Answer 1

在这个例子中，我们获取defaultatDOMContentLoaded并存储它。

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}`);

  }

});

<select id="selement">

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

  <option value="saab">Saab</option>

  <option value="vw">VW</option>

  <option value="audi" selected>Audi</option>

</select>

假设完全控制 HTML：

注意：我们添加了一个data标签。

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}`);

  }

});

<select id="selement">

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

  <option value="saab">Saab</option>

  <option value="vw">VW</option>

  <option value="audi" data-default="true" selected>Audi</option>

</select>

再次假设 HTML 控件，但对该data选项稍作调整。

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

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

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

  }

});

<select id="selement" data-default="audi">

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

  <option value="saab">Saab</option>

  <option value="vw">VW</option>

  <option value="audi" selected>Audi</option>

</select>

Answer 2

只需使用value：

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

<select id="selement">

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

  <option value="saab">Saab</option>

  <option value="vw">VW</option>

  <option value="audi" selected>Audi</option>

</select>

Answer 3

您可以测试是否option使用 选择了一个元素.select，因此您可以遍历所有选项并获取所选元素的值，如下所示：

function getSelectedValue(dropDownId) {

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

    for (option of options) {

        if (option.selected) {

            return option.value;

        }

    }

}

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

但是由于所选选项将被用户更改，因此您可以在页面加载脚本后立即将默认所选选项的值存储在变量中，例如一个简单的全局变量，例如 var defaultValue = getSelectedValue("my-drop-down");