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），但我想获取该特定下拉栏（例如audi）的默认值

我尝试使用document.getElementById("selement").selected 但它似乎不起作用

无论用户选择什么，我都希望获得默认设置。我有两个标签。第一个标签具有此下拉菜单。当用户移至下一个选项卡时，第一个选项卡中的下拉列表应显示默认值（例如“选择以下任何选项”，在本示例中为“ audi”），但对我而言，该下拉列表显示更改选项卡之前用户先前选择的选项。那么有什么方法可以通过JS获得“ audi”值吗？

Answer 1

在此示例中，我们在default处抓取DOMContentLoaded并将其存储。

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");

我们可以使用javascript的document.getElementById方法检索下拉栏的默认选定值吗？

3 个答案: