web-dev-qa-db-fra.com

Ajout de données supplémentaires pour sélectionner des options à l'aide de jQuery

Très simple question j'espère.

J'ai la boite <select> comme d'habitude

<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 $("#select :selected").text().

Mais comment puis-je stocker comme une valeur supplémentaire dans la balise <option>? Je voudrais pouvoir faire quelque chose comme <option value="3.1" value2="3.2">other</option> et obtenir la valeur de l'attribut value2 (qui serait 3.2 dans l'exemple).

javascriptjqueryhtml
127
jim smith

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

Voir cela comme un exemple de travail utilisant jQuery ici: http://jsfiddle.net/GsdCj/1/
Voir ceci en tant qu'échantillon de travail utilisant du JavaScript simple ici: 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 et facilement accessible depuis jQuery.

296
Phrogz

Pour moi, on dirait que vous voulez créer un nouvel attribut? Veux-tu

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

Pour ce faire, vous pouvez faire

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

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

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

Ce ne sera pas un code valide, mais je suppose que cela fait le travail.

4
mikesir87

J'ai fait deux exemples de ce que je pense que votre question pourrait être:

http://jsfiddle.net/grdn4/

Consultez cette option pour stocker des valeurs supplémentaires. Il utilise des attributs de données pour stocker l'autre valeur:

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

3
zsalzbank