embedding multiple values in options of <select> - php

Question

I need to embedd 2 values in each of the options of a drop down list and then need to be able to pass both of them to a JavaScript function.
<select onChange="display(<?=$manufacturers_id?>,<?=$modelID?>,this.value1,this.value2);">
..
..
echo "<option value1=\"".$variantID."\" value2=\"".$month_year."\">".$products_variant." ".$month_year."</option>";
..
..
</select>
As you can see this HTML code is generated by PHP, I need these two values fetched from database to passed to a JS function.
I am open to suggestions on better way of doing this?

Answer 1

you cannot add many values in an option.
instead you can use datasets (html5), like:
<select id="myselect">
<option data-this="foo" data-that="bar">
</select>
the javascript to read these values is:
var d = document.getElementById("myselect");
var _this = d.options[d.selectedIndex].dataset["this"];
var _that = d.options[d.selectedIndex].dataset["that"];
if you dont want to mess with datasets, you can store a JSON object:
...
<option value='<?php echo json_encode(array("foo"=>1,"bar"=>2)); ?>'>
...
and extract the data like:
var d = document.getElementById("myselect");
var option_value = JSON.parse( d.options[d.selectedIndex].value );
you choose
EDITED:
change this:
<select onChange="display(<?=$manufacturers_id?>,<?=$modelID?>,this);">
function display(manufacturers_id,modelid,obj) {
... json way
var option_value = JSON.parse(obj.options[obj.selectedIndex].value);
// option_value.foo = 1;
... dataset way
var _this = obj.options[obj.selectedIndex].dataset["this"];
// _this will have the "foo" value
}

Answer 2

I would render the options like this:
<option data-value1="X" data-value2="Y">
Then deal with these data- attributes however you want (with jQuery's data("value1") method, with the native getAttribute("data-value1"), etc.