Agregar datos adicionales para seleccionar opciones usando jQuery

139

Pregunta muy simple, espero.

Tengo la <select>caja habitual como esta

<select id="select">
    <option value="1">this</option>
    <option value="2">that</option>
    <option value="3">other</option>
</select>

Puedo obtener el valor seleccionado (usando $("#select").val()) y el valor de visualización del elemento seleccionado (usando $("#select :selected").text().

Pero, ¿cómo puedo almacenar como un valor adicional en la <option>etiqueta? Me gustaría poder hacer algo así <option value="3.1" value2="3.2">other</option>y obtener el valor del value2atributo (que sería 3.2 en el ejemplo).

javascript jquery html

— Jim Smith
fuente

desea agregar un elemento al cuadro de selección? o desea poder seleccionar más de uno a la vez y obtener los resultados?

— zsalzbank

no, simplemente quiero que haya un valor2 = "" en la etiqueta <option>, pero eso no funciona

— jim smith

Su pregunta no está clara (para mí, de todos modos). ¿Qué quiere decir con "almacenar otro valor en las opciones seleccionadas"? ¿Quiere decir que desea agregar una nueva opción a la selección, que aparecería al usuario cuando se abre?

— Phrogz

15

no desafía la lógica o la razón, caramba. Tengo una pregunta / caso similar para poder comparar los valores entre selecciones y guardar el texto de las opciones de uno en las opciones del otro mientras mantengo los valores / textos de esa selección, una forma en que parece posible es a través de los datos como indica la respuesta a continuación. solo porque USTED no lo pensó no significa que desafíe la lógica y la razón. el OP era una pregunta lo suficientemente decente, solo necesitaba que lo señalaran en la dirección correcta, no que recibiera un gran vaso de petulancia.

— user1783229

1

siempre puede agregar cualquier número de parámetros adicionales usando data-anything y usando .data ('cualquier cosa') donde haría un .value de lo contrario. simplemente cambie cualquier cosa por value2 o similar a su gusto

320

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 utilizar los atributos de datos de HTML5, puede agregar datos adicionales a los elementos de una manera sintácticamente válida a la que también se puede acceder fácilmente desde jQuery.

— Phrogz
fuente

@ jimsmith Sí, lo hará. (Si encuentra útil alguna de estas respuestas, debe votarlas. También debe marcar una como "aceptada" si considera que resuelve mejor su problema)

— Phrogz

1

¿Qué? No, no lo hará. Funcionará en todos los navegadores que admitan atributos de datos HTML5.

— glomad

13

@ithcy Todos los navegadores admiten (y tienen más de 10 años) atributos "no válidos" en el marcado, y obtenerlos / configurarlos a través del DOM. Los atributos de "datos" HTML5 son solo atributos personalizados con un esquema de nomenclatura y un nuevo estándar que los declara legales.

— Phrogz

@ Phhrogz lo sé. No se trata de que los navegadores "admitan" atributos no válidos, sino de ignorarlos. Realmente no hay otra forma de escribir un navegador web utilizable :) Sin embargo, creo que es difícil llamar a los atributos de datos "sintácticamente válidos", depende de su contexto. Si tienes un doctype HTML5, entonces sí, son válidos. De lo contrario, no lo son y harán que la validación del W3C falle.

— glomad

@ithcy Los navegadores los "ignoran" en la medida en que no hacen nada especial con ellos, pero no los ignoran en la medida en que están totalmente disponibles getAttribute(). Estaba respondiendo a su reclamo inicial de que mi respuesta no funcionaría en todos los navegadores. Mantengo mi afirmación de que funcionará en "todos" los navegadores (para una definición bastante generosa de "todos" en este caso). Muéstrame un navegador que admita jQuery pero que no funcione con estos atributos de datos, incluso con un doctype que no sea HTML5, y me comeré mis palabras.

— Phrogz

5

Para mí, ¿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, puedes usar

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

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

— mikesir87
fuente

El otro método es usar $ (selector) .data ('value2', "su valor") y $ (selector) .data ('value2') para recuperar ... que todavía es válido.

— mikesir87

Bueno, no sería sintácticamente válido tener atributos no estándar en el marcado original, pero a) nunca he visto ningún navegador desde los días de NS4 tiene algún problema con esto, yb) si puede modificar el DOM para producir algo que es "sintácticamente inválido", ¿de verdad?

— Phrogz

Sí, es realmente ... inválido. por qué usar propiedades arbitrarias cuando las propiedades data- * se han definido en el estándar html5.

— stephenbayer

3

Como @stephenbayer menciona ... la forma correcta de hacer esto ahora es usando las propiedades data- * compatibles con html5. Estas propiedades no eran realmente alrededor de / en uso pesado cuando respondido originalmente en 2010 :)

— mikesir87

2

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

http://jsfiddle.net/grdn4/

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

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

— zsalzbank
fuente

-1

Marcado HTML / JSP:

<form:option 
data-libelle="${compte.libelleCompte}" 
data-raison="${compte.libelleSociale}"   data-rib="${compte.numeroCompte}"                              <c:out value="${compte.libelleCompte} *MAD*"/>
</form:option>

CÓDIGO JQUERY: Evento: cambio

var $this = $(this);
var $selectedOption = $this.find('option:selected');
var libelle = $selectedOption.data('libelle');

Para tener un elemento libelle.val () o libelle.text ()

— Fadid
fuente

<formulario: opción data-libelle-compte = "$ {compte.libelle} data-raison =" $ {compte.raison} "data-compte =" $ {compte.numero} "> <c: out value =" $ {compte.libelleCompte} MAD "/> </ form: option>

— Fadid

-4

Para almacenar otro valor en las opciones seleccionadas:

$("#select").append('<option value="4">another</option>')

— Kyle
fuente