embedding multiple values in options of Asked Jun 06 '12 at 17:48 Active Jun 06 '12 at 18:30 Viewed 1,571 times 1 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? php javascript html asked Jun 06 '12 at 17:48 AJ. 2,561 9 46 81 2 Answers2 3 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 } edited Jun 06 '12 at 18:30 answered Jun 06 '12 at 18:00 How do I pass this with onChange() in tag? – AJ. Jun 06 '12 at 18:19

Answer 1

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.