Accessing multiple values for single option with javascript

Question

I have a rather complicated lookup for an option. It comes from a separate system and I really need to keep track of two pieces of data instead of sending only one and having to do additional lookups which are expensive. Ideally, I want to pass all the data I received from one AJAX call into another.

Standard stuff:

<select name="chosen_option" id="chosen_option">
  <option value="apple">Option One</option>
</select>

Accessing it with javascript is fairly simple:

$("#chosen_option).val()

I know I have many ways to put extra data into the option according to my searches:

<option value="PartA:'apple',PartB:'450'">Option One</option>
<option data-partb="450" value="apple">Option One</option>

For the first method I don't understand how to reference PartA or Partb on their own, only the entire value for the option.

For the second method the selector is not capable of grabbing that particular attribute from the selected option. It says undefined.

Adding an ID to each individual option does not allow me to grab it either:

<option id="optionid_apple" data-partb="450" value="apple">Option One</option>

$("#optionid_apple").attr('data-partb)  // Not working
$("#optionid_apple").data('partb') // Not working
$("#optionid_apple").data('data-partb') // Not working

How can I store multiple pieces of data on a single option and access it in Javascript?

P.S - I thought about making the value itself an XML doc, but I don't really know how to do that correctly in the HTML, etc.

The code you've shown with the id on the option element should work. At least, $("#optionid_apple").data('partb') should work. $("#optionid_apple").attr('data-partb) would work if you hadn't left a quote off just before the last ). Though when I say "work" I mean it should return a value, but it's not a practical solution since you first need to somehow determine the id of the selected option. — nnnnnn
– nnnnnn, Commented Jun 22, 2012 at 2:19
I just made a typo in the code above. There is a quote at the end. None of those attempts did work, and the id was the confusing one since it was specific. — user1441141
– user1441141, Commented Jun 22, 2012 at 6:18
Here's a simple example of working code that retrieves both the value and the data-partb of the selected option: jsfiddle.net/zrVqv (basically the same as The Jonas Persson's answer except I don't like to use .data() to retrieve attribute values because I don't like its type conversion). If something similar doesn't work for you please post a larger extract from your actual code to show the context in which you are doing these operations. — nnnnnn
– nnnnnn, Commented Jun 22, 2012 at 6:33
@nnnnn - Adding the option:selected to the selector does allow me to grab the data-partb. I had already started using .data() in my production code along with the modified selector. What challenges have you found with its type conversion? Thanks again, btw. — user1441141
– user1441141, Commented Jun 22, 2012 at 19:35
The only issue I've had is if the attribute contains a string with leading zeros (usually some form of id or timestamp) like data-id="0142" then .data('id') would return that as the number 142. I don't expect everyone to follow my lead, but I prefer to use .attr() to get attribute values, and .data() only to get values that I have previously stored via .data(). Just helps keep things clear in my own mind, even aside from data conversion considerations, noting that when you set/store a value via .data() it doesn't create an attribute. — nnnnnn
– nnnnnn, Commented Jun 22, 2012 at 22:02

The Jonas Persson · Accepted Answer · 2012-06-22 02:25:11Z

1

Use this to make sure that you get the selected option.

$("#chosen_option option:selected").data('partb')

otherwise you are trying to get attributes from the <select> tag.

edited Jun 22, 2012 at 2:25

answered Jun 22, 2012 at 1:49

The Jonas Persson

1,7461 gold badge17 silver badges38 bronze badges

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

1 Comment

nnnnnn Over a year ago

The id of the select element is "chosen_option". But otherwise yes, this is how I'd do it.

Collectives™ on Stack Overflow

Accessing multiple values for single option with javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related