Ajout de données supplémentaires aux options de sélection à l'aide de jQuery

Question

Question très simple, j'espère.

J'ai l'habituel <select> comme ceci

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

Je peux obtenir la valeur sélectionnée (en utilisant $("#select").val() ) et la valeur d'affichage de l'élément sélectionné (en utilisant la touche $("#select :selected").text() .

Mais comment puis-je stocker comme une valeur supplémentaire dans le fichier <option> tag ? J'aimerais pouvoir faire quelque chose comme <option value="3.1" value2="3.2">other</option> et obtenir la valeur de la value2 (qui serait 3,2 dans l'exemple).

Answer 1

Balisage 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>

Code

// 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');

Vous pouvez voir ici un exemple fonctionnel utilisant jQuery : http://jsfiddle.net/GsdCj/1/
Vous pouvez voir ici un exemple de fonctionnement en utilisant simplement JavaScript : http://jsfiddle.net/GsdCj/2/

En utilisant attributs de données à partir de HTML5, vous pouvez ajouter des données supplémentaires aux éléments d'une manière syntaxiquement valide qui est également facilement accessible à partir de jQuery.

Answer 2

Pour moi, il semble que vous vouliez créer un nouvel attribut ? Voulez-vous

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

Pour cela, vous pouvez faire

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

Et ensuite pour le récupérer, vous pouvez utiliser

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

Ce ne sera pas un code valide, mais je suppose que ça fait l'affaire.

Answer 3

J'ai donné deux exemples de ce que je pense être votre question :

http://jsfiddle.net/grdn4/

Vérifiez ceci pour stocker des valeurs supplémentaires. Il utilise des attributs de données pour stocker l'autre valeur :

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

Answer 4

HTML/JSP Markup :

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

CODE JQUERY : Événement : changement

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

Pour avoir un élément libelle.val() ou libelle.text()

Answer 5

Pour enregistrer une autre valeur dans les options sélectionnées :

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