Выбранный индекс изменил событие в JavaScript для HTML-элемента управления

Question

У меня есть элемент управления HTML:

<select id="grade">

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

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

$("#grade").on('change', function() { 
alert("hi"); 
});

Кроме того, как я могу получить выбранное значение в Java Script.

Answer 1

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

$(document).on('change',"#grade", function() { 
     alert( $(this).val())
});

Если идентификатор существует, ваш код должен работать до тех пор, пока вы его завернули *document.ready*

$(function(){
/* your code*/

})

Answer 2

Вот альтернатива для тех, кто не нуждается в jQuery:

<select id="grade" onchange="OnGradeChanged(this.value);">
     <option value="1">1</option>
     <option value="2">2</option>
</select>
<script>
function OnGradeChanged(value){
     alert(value);
}
</script>

Answer 3

Вы также можете попробовать:

$(document).ready(function(){
  $('#grade').change(function() {
    alert('Handler for .change() called.');
    alert($(this).val()); 
  });
});