在选项中嵌入多个值<select>

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.