Получение значения списка выбора с помощью jQuery

Question

Это проблема, с которой я сталкиваюсь при использовании jQuery в Firefox Jetpack. В моем коде Jetpack я динамически создаю несколько ящиков SELECT с опциями и их соответствующие значения:

...
listOfWords[i] = "<select id=clozefox_answer> <option
value=wrongAnswer>distractor</option>"
listOfWords[i] += "<option value=trueAnswer>" + currentWord +
"</option></select>"
...
textStr = listOfWords.join(" ");
$(this).html(textStr);

Это отлично работает. Теперь, когда пользователь делает некоторые выборы, используя выпадающие списки выбора на странице, и нажимает кнопку «Рассчитать счет», я запускаю функцию, чтобы просмотреть поля SELECT и получить их выбранные значения:

$(doc).find("select[id=clozefox_answer]").each(function (index) {
   var selectedValue = $(this).val();

   if (selectedValue == "trueAnswer") {
       numCorrectAnswer++;
   }
});

Даже несмотря на то, что приведенный выше код правильно соответствует моим динамически созданным SELECT, $(this).val() НЕ возвращает значение опции, но текст опции (например, «distractor» или любую переменную currentWord в комплекте). Как получить значение параметра (например, «trueAnswer» или «falseAnswer»)?

Answer 1

Попробуйте поместить кавычки вокруг всех ваших атрибутов HTML, это стандартная практика.

Кроме того, в вашем find селекторе вы должны поместить кавычки вокруг clozefox_answer и id (['id'='clozefox_answer'])

Если это не сработает, попробуйте получить значение, набрав $( this ).attr( 'value' );

Answer 2

Следующий код делает то, что я ожидаю:

var selectedValue = $(this).attr("value");

Но я до сих пор не знаю, почему

var selectedValue = $(this).val();

не работает должным образом. Во всяком случае, я решил свою проблему на данный момент.