Adicionando dados adicionais para selecionar opções usando o jQuery

139

Pergunta muito simples, espero.

Eu tenho a <select>caixa habitual como esta

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

Posso obter o valor selecionado (usando $("#select").val()) e o valor de exibição do item selecionado (usando $("#select :selected").text().

Mas como posso armazenar como um valor adicional na <option>tag? Eu gostaria de poder fazer algo parecido <option value="3.1" value2="3.2">other</option>e obter o valor do value2atributo (que seria 3,2 no exemplo).

javascript jquery html

— Jim Smith
fonte

você deseja adicionar um item à caixa de seleção? ou você deseja selecionar mais de um de cada vez e obter os resultados?

— Zsalzbank

Não, eu simplesmente quero que haja como um value2 = "" na tag <opção>, mas isso não funciona

— jim smith

Sua pergunta não é clara (para mim, de qualquer maneira). O que você quer dizer com "armazenar outro valor nas opções selecionadas"? Quer dizer que você deseja adicionar uma nova opção ao select, que apareceria ao usuário quando aberto?

— Phrogz

15

não desafia a lógica ou a razão, nossa. Eu tenho uma pergunta / caso semelhante para que eu possa comparar os valores entre as seleções e salvar o texto das opções de uma pessoa nas opções da outra, mantendo os valores / textos dessa seleção, de uma maneira que parece possível é através dos dados, conforme a resposta abaixo indica. só porque você não pensou nisso não significa que desafia a lógica e a razão. o OP era uma pergunta decente o suficiente, ele só precisava ser apontado na direção certa, não receber um copo grande de presunçoso.

— user1783229

1

você sempre pode adicionar qualquer número de parâmetros extras usando dados-qualquer coisa e usando .data ('qualquer coisa') onde quer que você faça um valor. apenas trocar qualquer coisa para value2 ou similar ao seu gosto

320

Marcação 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');

Veja isso como uma amostra de trabalho usando jQuery aqui: http://jsfiddle.net/GsdCj/1/
Veja isso como uma amostra de trabalho usando JavaScript simples aqui: http://jsfiddle.net/GsdCj/2/

Usando atributos de dados do HTML5, você pode adicionar dados extras aos elementos de uma maneira sintaticamente válida, que também é facilmente acessível no jQuery.

— Phrogz
fonte

@jimsmith Sim, será. (Se você encontrar qualquer uma dessas respostas úteis, você deve votar-los Você também deve marcar um como "aceites" se você descobriu que é melhor resolvido o seu problema..)

— Phrogz

1

O que? Não, não vai. Ele funcionará em todos os navegadores que suportam atributos de dados HTML5.

— glomad

13

@ithcy Todos os navegadores suportam (e têm mais de 10 anos) atributos "inválidos" na marcação e obtendo / configurando-os através do DOM. Os atributos "dados" do HTML5 são apenas atributos personalizados com um esquema de nomenclatura e um novo padrão que os declara válidos.

— Phrtz #

@Phrogz eu sei disso. Não é uma questão de os navegadores "suportarem" atributos inválidos, mas sim de ignorá-los. Não há realmente nenhuma outra maneira de escrever um navegador da Web utilizável :) No entanto, acho muito difícil chamar atributos de dados como "sintaticamente válidos" - isso depende do seu contexto. Se você tem um doctype HTML5, sim, eles são válidos. Caso contrário, não estão e farão com que a validação do W3C falhe.

— glomad

@ithcy Os navegadores os 'ignoram' na medida em que não fazem nada de especial com eles, mas não os ignoram na medida em que estão totalmente disponíveis getAttribute(). Eu estava respondendo à sua reivindicação inicial de que minha resposta não funcionaria em todos os navegadores. Eu mantenho minha afirmação de que ele funcionará em navegadores 'all' (para uma definição bastante generosa de 'all' nesse caso). Mostre-me um navegador que suporte jQuery, mas não funcione com esses atributos de dados - mesmo com um doctype não HTML5 - e eu irei comer minhas palavras.

— Phrogz 6/01/11

5

Para mim, parece que você deseja criar um novo atributo? Você quer

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

Para fazer isso, você pode fazer

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

E então, para recuperá-lo, você pode usar

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

Não será um código válido, mas acho que funciona.

— mikesir87
fonte

O outro método é usar $ (seletor) .data ('valor2', "seu valor") e $ (seletor) .data ('valor2') para recuperar ... que ainda é válido.

— mikesir87

Bem, não seria sintaticamente válido ter atributos não padronizados na marcação original, mas a) eu nunca vi nenhum navegador desde os dias do NS4 com problemas, eb) se você pode modificar o DOM produzir algo que é "sintaticamente inválido", é realmente?

— Phrogz

sim, é realmente ... inválido. por que usar propriedades arbitrárias quando as propriedades data- * foram definidas no padrão html5.

— stephenbayer

3

Como o @stephenbayer menciona ... a maneira correta de fazer isso agora é usar as propriedades data- * suportadas pelo html5. Essas propriedades não estavam realmente em torno de / em uso pesado, quando originalmente respondeu de volta em 2010 :)

— mikesir87

2

Fiz dois exemplos do que acho que sua pergunta pode ser:

http://jsfiddle.net/grdn4/

Verifique isso para armazenar valores adicionais. Ele usa atributos de dados para armazenar o outro valor:

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

— zsalzbank
fonte

-1

Marcação 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: alteração

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

Para ter um elemento libelle.val () ou libelle.text ()

— Fadid
fonte

<form: opção data-libelle-compte = "$ {compte.libelle} data-raison =" $ {compte.raison} "data-compte =" $ {compte.numero} "> <c: out value =" $ {compte.libelleCompte} MAD "/> </ form: option>

— Fadid 11/02/14

-4

Para armazenar outro valor nas opções selecionadas:

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

— Kyle
fonte