Есть ли что-то вроде ".checked для раскрывающегося списка в JavaScript?

Question

Я делаю сайт для своего университетского проекта (используя HTML-CSS-javascript). Я сделал выпадающий список, и я хочу, чтобы функция делала что-то другое с каждый выбор из выпадающего списка

Например, когда они выбирают «2 меча», предупреждение «меч 2»

спасибо за потраченное время:)

HTML-код:

<select name="swordlist">
  <option id="one">1 sword</option>
  <option id="two">2 swords</option>
  <option id="three">3 swords</option>
</select>

код JavaScript:

var swordlist1 = document.getElementById('one').checked;
var swordlist2 = document.getElementById('two').checked;
var swordlist3 = document.getElementById('three').checked;

if(swordlist1 == true) {
  alert("sword 1");
} else if(swordlist2 == true) {
  alert("sword 2");
} else if(swordlist3 == true) {
  alert("sword 3");
}  

и кнопка для вызова функции после выбора чего-либо из раскрывающегося списка (если вы знаете способ вызова функции без какой-либо кнопки только для выбора, что было бы очень приятно):

<input type="button" onclick="WholeCost();" id="test" value="test">

Answer 1

Значение выбора даст вам значение отмеченной опции. Итак, вам нужно добавить значение к опциям.
Предыдущий ответ тоже правильный, но это намного проще. Особенно, если у вас длинный элемент select

<select name="swordlist" id="swordlist">
    <option value="one">1 sword</option>
    <option value="two">2 swords</option>
    <option value="three">3 swords</option>
</select>

<script>
function WholeCost(){
    var selectedSword = document.getElementById('swordlist').value;
    alert(selectedSword)
}
</script>

Answer 2

Вы можете использовать свойство selected, чтобы проверить, выбрана ли опция выбора.

Checked для переключателей и флажков.

Но если вы хотите проверить, какой элемент выбран из элемента select, вам не нужно проверять каждый параметр, вы можете проверить свойство value элемента html select.

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

Вы также можете вызвать свой метод WholeCost, прикрепив его к событию onchange элемента select html. Ваш метод будет вызываться каждый раз, когда выбранные изменения. Поэтому нет необходимости добавлять кнопку HTML, который нужно нажать.

Как это:

function WholeCost(e) {
  // Get selected option without checking one by one
  console.log(e.value);

  // Instead of checked, use selected for select elements
  var swordlist1 = document.getElementById('one').selected;
  var swordlist2 = document.getElementById('two').selected;
  var swordlist3 = document.getElementById('three').selected;

  if(swordlist1 == true) {
    alert("sword 1");
    
  } else if(swordlist2 == true) {
    alert("sword 2");
    
  } else if(swordlist3 == true) {
    alert("sword 3");
  }  
}

<!-- call your method WholeCost when selected option changes -->
<select name="swordlist" onchange="WholeCost(this)">
  <!-- each option has the property value -->
  <option value="one" id="one">1 sword</option>
  <option value="two" id="two">2 swords</option>
  <option value="three" id="three">3 swords</option>
</select>