Показать значение по умолчанию с выпадающим списком HTML - PullRequest
Новая
       3

Показать значение по умолчанию с выпадающим списком HTML

0 голосов
/ 28 февраля 2020

Я создал выпадающий список. Таким образом, раскрывающийся список показывает 1 в качестве значения по умолчанию в раскрывающемся списке, но я также хочу показать значение, назначенное этому показу, прежде чем я выбрал что-либо в первую очередь. Это означает, что до того, как я что-то нажму, я хочу, чтобы он показывал « Вы выбрали: один » по умолчанию. Как мне это лучше всего сделать? 

function myFunction() {
  var x = document.getElementById("mySelect").value;
  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>
<p id="demo"></p>

спасибо!

Ответы [ 3 ]

2 голосов
/ 28 февраля 2020

просто позвоните myFunction() onload 

function myFunction() {
  var x = document.getElementById("mySelect").value;

  if (x == "one") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "two") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  } else if (x == "three") {
    document.getElementById("demo").innerHTML = "You selected: " + x;
  }
}

myFunction(); // call onload
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

<p id="demo"></p>

Обновлено удалить if оператор 

function myFunction() {
  var x = document.getElementById("mySelect").value;

  document.getElementById("demo").innerHTML = "You selected: " + x;
}

myFunction(); // call onload
<select name="test" id="mySelect" onchange="myFunction()">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

<p id="demo"></p>
1 голос
/ 28 февраля 2020

Вы можете вызывать свою функцию при загрузке страницы.

Как и ниже, (function(){})(); - это функция самозвонка, которая запускается при загрузке страницы. 

function myFunction() {
    var x = document.getElementById("mySelect").value;

   if(x == "one"){
       document.getElementById("demo").innerHTML = "You selected: " + x;}
    else if(x == "two"){
       document.getElementById("demo").innerHTML = "You selected: " + x;}
    else if(x == "three"){
       document.getElementById("demo").innerHTML = "You selected: " + x;
    }
}

(function(){
 myFunction()
})();
<select name="test" id="mySelect" onchange="myFunction()">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>

<p id="demo"></p>
0 голосов
/ 28 февраля 2020

Не стоит добавлять обработчики событий в качестве атрибутов html элементов (или встроенных обработчиков событий). Почему бы и нет?

Вместо этого в отдельном скрипте добавьте выбранное значение при запуске и добавьте обработчик change к document, который отображает значение выбранного параметра после выбора сделано. 

{
  // at start: fill p#demo
  document.querySelector(`#demo`).textContent = `Current selection: ${
    document.querySelector(`#mySelect option:checked`).value}`;
  // change handler  
  document.addEventListener(`change`, evt => {
    if (evt.target.id === `mySelect`) {
      document.querySelector(`#demo`).textContent = `You selected: ${
        evt.target.querySelector(`option:checked`).value}`;
    }
  });
}
<select name="test" id="mySelect">
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

<p id="demo"></p>
...