Question

I have a <select> list of products that I generate with PHP. I would like to store each product’s weight in each <option> element somehow so that I can retrieve it later with Javascript.

I would like to print the data in the element (as opposed to adding it with Javascript). Something like this.

<option value="foo" weight="25">bar</option>

This seems to work with IE, but not Firefox and others.

I want to avoid storing a JSON string in the value property if possible. Any suggestions?

Answer 1

You can use data- attributes and retrieve their values with jquery.data() function:

<option value="foo" data-weight="25">bar</option>

---
JS:

alert($('your option').data('weight')); 
==> 25