Agregar datos adicionales para seleccionar opciones usando jQuery

Solución:

Marcado HTML

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

Código

// JavaScript using jQuery
$(function(){
    $('select').change(function(){
       var selected = $(this).find('option:selected');
       var extra = selected.data('foo'); 
       ...
    });
});

// Plain old JavaScript
var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Vea esto como una muestra de trabajo usando jQuery aquí: http://jsfiddle.net/GsdCj/1/
Vea esto como una muestra de trabajo usando JavaScript simple aquí: http://jsfiddle.net/GsdCj/2/

Al usar atributos de datos de HTML5, puede agregar datos adicionales a los elementos de una manera sintácticamente válida que también es fácilmente accesible desde jQuery.

A mí me parece que quieres crear un nuevo atributo. Quieres

<option value="2" value2="somethingElse">...

Para hacer esto, puedes hacer

$(your selector).attr('value2', 'the value');

Y luego, para recuperarlo, puede usar

$(your selector).attr('value2')

No va a ser un código válido, pero supongo que funciona.

Hice dos ejemplos de lo que creo que podría ser tu pregunta:

http://jsfiddle.net/grdn4/

Consulte esto para almacenar valores adicionales. Utiliza atributos de datos para almacenar el otro valor:

http://jsfiddle.net/27qJP/1/

---

---

Utiliza Nuestro Buscador