Я пытаюсь определить, соответствует ли переменная, выбранная в раскрывающемся списке. Как я могу это сделать?

Question

Я создал базовый выпадающий список.Я просто пытаюсь выбрать значение, отображаемое в данный момент в раскрывающемся списке, сохранить его в переменной и распечатать в консоли.Конечная цель состоит в том, чтобы сравнить эту переменную с другой переменной, чтобы определить, был ли выбор правильным.

Я новичок, поэтому я предполагаю, что никому не нужно знать о моих неудачных попытках здесь ...

<div id="Selections">
    <div id="game1">
        <p> Saturday 1:00PM EST   Team 1 vs Team 2 </p>
        <select id="game1Pick">
            <option>Team 1</option>
            <option>Team 2</option>
        </select>
    </div>
</div>

Я ожидаю, что консоль будет печатать все, что я выбрал, но я получаю ошибки.

Answer 1

var teamVal = "team-1";
$('#game1Pick').on('change', function(){
  if($(this).val() == teamVal){
    alert('variable matches the option');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Selections">
    <div id="game1">
        <p> Saturday 1:00PM EST   Team 1 vs Team 2 </p>
        <select id="game1Pick">
            <!--use value 1st for options -->
            <option value="">--select--</option>
            <option value="team-1">Team 1</option>
            <option value="team-2">Team 2</option>
        </select>
    </div>
</div>

Пожалуйста, отметьте это, я сделал некоторые изменения в HTML и использую для этого некоторые jQuery.

Answer 2

Ниже я непосредственно передал выбранный объект в onChange. И если вы также хотите значение до onchange также вы можете обратиться по этой ссылке. Получение значения выбора (раскрывающегося списка) до изменения

function printValue(obj) {
    console.log('Selected Value is --> ', obj.value);
    //put the condition 
}

 <div id="Selections">
    <div id="game1">
        <p> Saturday 1:00PM EST   Team 1 vs Team 2 </p>
        <select id="game1Pick" onchange="printValue(this);">
            <option>Team 1</option>
            <option>Team 2</option>
        </select>
    </div>
</div>

Answer 3

Вам нужна функция onchange, чтобы определить, какое значение вы выбрали. Пример:

<div id="Selections">
    <div id="game1">
        <p> Saturday 1:00PM EST   Team 1 vs Team 2 </p>
        <select id="game1Pick" onchange="myFunction()">
            <option>Team 1</option>
            <option>Team 2</option>
        </select>
    </div>
</div>

<script>
function myFunction() {
  var x = document.getElementById("game1Pick").value;
  console.log('Selected Value is -> ', x);
}
</script>