Считать значение из опции выбора

Question

У меня есть следующий сценарий,

<select id="dropDown" onChange="this.options[this.selectedIndex].onclick();>
<c:forEach items="" var="...">
<c:choose>
<c:when test="">
<option id="<portlet:namespace />..." value="red" onclick="<portlet:namespace />SomeFunction(this.id, 'Contants.SOME_ID', '<c:out value="${some_value}"/>)">red</option>
</c:when>
<c:when test="">
<option id="<portlet:namespace />..." value="yellow" onclick="">yellow</option>
</c:when>
<c:when test="">
<option id="<portlet:namespace />..." value="blue" onclick="">blue</option>
</c:when>
</c:choose>
</c:forEach>
</select>

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

var selected_item = $('#dropDown').val();
alert(selected_item);

Есть что-то, что я пропускаю?

РЕДАКТИРОВАТЬ

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

<portlet:namespace />SomeFunction(id, some_id, some_value) {

}

Answer 1

Ваш onclick в варианте ничего не делает. Поскольку вы используете jQuery, вы вообще не можете использовать встроенный javascript.

Удалить onChange="this.options[this.selectedIndex].onclick(); и все onclick=""тогда попробуй

$(function() {
  $('#dropDown').change(function() {
     alert($(this).val());
  });
});

Answer 2

Как вы используете JQuery, так что вам не нужно onclick для каждого option а также onChange в select. Удалите их и попробуйте с .on() с помощью change событие.

$('#dropDown').on('change', function() {
   var selected_item = this.value;
   alert( selected_item );
});

Если вы попытаетесь обновить значение selected_item переменная при загрузке страницы, тогда вы можете вызвать событие изменения следующим образом:

$('#dropDown').on('change', function() {
   var selected_item = this.value;
   alert( selected_item );
}).change(); // trigger the change event at page load