Можем ли мы получить выбранное по умолчанию значение раскрывающегося списка, используя метод document.getElementById в javascript?

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»), но для меня раскрывающийся список показываеттот, который пользователь выбрал ранее до изменения вкладки.Так есть ли способ получить значение audi через JS?

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

Вы можете проверить, выбран ли элемент option, используя .select, чтобы вы могли просмотреть все параметры и получить значение выбранного элемента, например:

function getSelectedValue(dropDownId) {

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

    for (option of options) {
        if (option.selected) {
            return option.value;
        }
    }
}

ГдеdropDownId - это идентификатор вашего элемента select.

Но поскольку выбранный параметр будет изменен пользователем, вы можете сохранить значение выбранного по умолчанию параметра в переменной, как только страница загрузитсяваш скрипт, например, с простой глобальной переменной, такой как var defaultValue = getSelectedValue("my-drop-down");

Answer 3

Просто используйте 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>