Obtener el valor de una lista de selección con jQuery

Question

Este es un problema que enfrento durante el uso de jQuery dentro de Firefox Jetpack. En mi código Jetpack estoy dinámicamente la creación de algunas cajas de selección con opciones y su valores respectivos:

...
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);

Esto funciona bien. Ahora cuando el usuario hace algunas selecciones usando el desplegable listas de selección en la página y hace clic en el botón Calcular Puntuación corro una función de atravesar las cajas de selección y obtener sus valores seleccionados:

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

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

A pesar de que el código anterior correctamente emparejado mis SELECTs creados de forma dinámica, $(this).val() no devuelve el valor de la opción, pero el texto de la opción (por ejemplo, "distractor" o lo que sea la variable currentWord incluido). ¿Cómo puedo obtener el valor de opción (por ejemplo, "trueAnswer" o "wrongAnswer")?

Answer 1

El siguiente código hace lo que espero:

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

Pero todavía no sé por qué

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

no funciona como se esperaba. De todos modos, he resuelto mi problema por ahora.

Answer 2

Trate de poner comillas alrededor de todos sus atributos HTML, esto es la práctica.

Además, en su selector de find usted debe poner comillas alrededor de clozefox_answer y id (['id'='clozefox_answer'])

Si eso no funciona, entonces intente conseguir el valor llamando $( this ).attr( 'value' );