160

Very simple question I hope.

I have the usual <select> box like this

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

I can get the selected value (by using $("#select").val()) and the selected item's display value (by using $("#select :selected").text().

But how can I store like an additional value in the <option> tag? I would like to be able to do something like <option value="3.1" value2="3.2">other</option> and get the value of the value2 attribute (which would be 3.2 in the example).

Improve this question
9
  • you want to add an item to the select box? or you want to be able to select more than one at a time and get the results? Commented Dec 30, 2010 at 17:14
  • no i simply want there to be like a value2="" in the <option> tag, but that doesn't work Commented Dec 30, 2010 at 17:15
  • Your question is not clear (to me, anyhow). What do you mean by "store another value in the select options"? Do you mean you want to add a new option to the select, that would appear to the user when opened? Commented Dec 30, 2010 at 17:16
  • 19
    doesn't defy logic or reason, geez. i have a similar question/case so I can compare the values between selects and save the text of one's options onto the other's options while maintaining that select's values/texts, one way it seems possible is through data as the answer below indicates. just because YOU didn't think of it doesn't mean it defies logic and reason. the OP was a decent enough question he just needed to be pointed in right direction, not get a big glass of smug. Commented Sep 14, 2013 at 20:58
  • 1
    you can always add any number of extra parameters using data-anything and using .data('anything') wherever you would do a .value otherwise. just swap out anything for value2 or similar to your liking Commented Jul 7, 2016 at 9:09

5 Answers 5

Reset to default
370

HTML Markup

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

See this as a working sample using jQuery here: http://jsfiddle.net/GsdCj/1/
See this as a working sample using plain JavaScript here: http://jsfiddle.net/GsdCj/2/

By using data attributes from HTML5 you can add extra data to elements in a syntactically-valid manner that is also easily accessible from jQuery.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@jimsmith Yes, it will. (If you find any of these answers useful, you should vote them up. You should also mark one as "accepted" if you found that it best solved your problem.)
What? No it won't. It will work in all browsers that support HTML5 data attributes.
@ithcy All browsers support (and have for 10+ years) "invalid" attributes in the markup, and getting/setting these through the DOM. HTML5 "data" attributes are just custom attributes with a naming scheme and a new standard that declares them to be legal.
@Phrogz I know this. It's not a matter of browsers "supporting" invalid attributes, but rather a matter of ignoring them. There is really no other way to write a usable web browser :) However I think it's a stretch to call data attributes "syntactically valid" - it depends on your context. If you have an HTML5 doctype, then yes, they're valid. Otherwise they're not and will cause W3C validation to fail.
instead of selected.getAttribute('data-foo'); you could use selected.dataset.foo
|
7

To me, it sounds like you want to create a new attribute? Do you want 

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

To do this, you can do

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

And then to retrieve it, you can use

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

It's not going to be valid code, but I guess it does the job.

Improve this answer

4 Comments

The other method is to use $(selector).data('value2', "your value") and $(selector).data('value2') to retrieve... which is still valid.
Well, it wouldn't be syntactically valid to have non-standard attributes in the original markup, but a) I've never seen any browser since the days of NS4 have any problem with this, and b) if you can modify the DOM to produce something that is "syntactically invalid", is it really?
yes, it is really...invalid. why use arbitrary properties when data-* properties have been defined in the html5 standard.
As @stephenbayer mentions... the correct way to do this now is using the html5 supported data-* properties. Those properties weren't really around/in heavy use when originally answered back in 2010 :)
0

HTML

<Select id="SDistrict" class="form-control"> <option value="1" data-color="yellow" > Mango </option> </select>

JS when initialized

 $('#SDistrict').selectize({ create: false, sortField: 'text', onInitialize: function() { var s = this; this.revertSettings.$children.each(function() { $.extend(s.options[this.value], $(this).data()); }); }, onChange: function(value) { var option = this.options[value]; alert(option.text + ' color is ' + option.color); } });

You can access data attribute of option tag with option.[data-attribute]

JS Fiddle : https://jsfiddle.net/shashank_p/9cqoaeyt/3/

Improve this answer

Comments

-1

To store another value in select options:

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

Comments

-1

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>

JQUERY CODE: Event: change

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

To have a element libelle.val() or libelle.text()

Improve this answer

1 Comment

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.