Select element, return 2 values

Warning! This post is either deprecated or outdated.

I had a problem earlier today: I needed to have a select box that returns 2 or more values in stead of 1.
I got this far:
The value of the options gets the id of the item that is displayed in each option.
I do have an other value that should be linked on this option. Is there an easy way to do this?

<select id="category" name="data[cat]"> 
    <option label="0" value="12">A</option> 
    <option label="0" value="7">B</option> 

I tried to do this with entering the second value into a label attribute but then the problem is that i don’t know the correct way to get the label value of the selected option. This is written in Jquery.
To get the selected option I use:

$("#category").livequery('change', function () {
var catId = ($(this)[0].value);

the solution seems to be quite simple:

The label attribute is used by some browsers to display the content of the option, so your list box might display two 0 options.

A better solution might be to do the following:

<select id="category" name="data[cat]">
    <option value="12,0">A</option>
    <option value="7,0">B</option>

and split the value in the event handler, e.g.

$("#category").livequery('change', function () {            
    var values = ($(this)[0].value).split(",");
    var catId = values[0];
    var otherId = values[1];

Wasn’t that easy

By the way, if you found a typo, please fork and edit this post. Thank you so much! This post is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.


Fork me on GitHub