Question

我需要在下拉列表的每个选项中嵌入2个值，然后需要能够将它们都传递给JavaScript函数。

<select onChange="display(<?=$manufacturers_id?>,<?=$modelID?>,this.value1,this.value2);">
..
..
echo "<option value1=\"".$variantID."\" value2=\"".$month_year."\">".$products_variant." ".$month_year."</option>";
..
..

</select>

正如您所看到的，这个HTML代码是由PHP生成的，我需要从数据库中获取这两个值以传递给JS函数。

我愿意接受有关更好的方法的建议吗？

Answer 1

您无法在选项中添加多个值。相反，您可以使用datasets（html5），例如：

<select id="myselect">
 <option data-this="foo" data-that="bar">
</select>

读取这些值的javascript是：

var d = document.getElementById("myselect");
var _this = d.options[d.selectedIndex].dataset["this"];
var _that = d.options[d.selectedIndex].dataset["that"];

如果您不想弄乱数据集，可以存储JSON对象：

...
<option value='<?php echo json_encode(array("foo"=>1,"bar"=>2)); ?>'>
...

并提取如下数据：

var d = document.getElementById("myselect");
var option_value = JSON.parse( d.options[d.selectedIndex].value );

你选择

<强>编辑：

改变这个：

<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

我会渲染这样的选项：

<option data-value1="X" data-value2="Y">

然后根据需要处理这些数据属性（使用jQuery的data("value1")方法，使用本机getAttribute("data-value1")等等。

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

2 个答案: