The select element should return 2 values.

Question

I have a select box with options in it.
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 value="12" label="0">A</option>
<option value="7" label="0">B</option>
</select>

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

This works great, but i just don't know how to get the label value of the selected option. Or maybe a better way to solve this problem.

Thx in advance.K

Answer 1

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>
</select>

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];
});

Answer 2

One of the way is to set the value of option as an JSON string like

<select id="category" name="data[cat]">
    <option value="{value1:10, value2:20}" label="0">A</option>
    <option value="{value1:30, value2:40}" label="0">B</option>
</select>

And then parse the value as JSON object. Once you get the JSON object then you can extract individual value from the same. In this way you can add as many values as you like.