Question

我想在HTML中携带一些额外的隐藏信息（例如：邮政编码）选择/选项下拉列表，并使其可用于javascript函数时用户更改选项框选择。

这是我想要做的事情（但它不起作用）。

<select id="sel_activity" onchange="selectionChange(this.info)"> 
    <option info=""       value="CAR">CAR PROBLEM</option> 
    <option info=""       value="COFFEE">Coffee Break</option>
    <option info="45678"  value="INV">INVENTORY COUNT</option>
    <option info="23567"  value="INVDROP">Inventory</option>
    <option info="" value="LUNCH">Lunch Break</option> 
    <option info="87654"  value="MEET">Meeting</option>
</select>

.
.
.

function selectionChange(info){      
    alert(info);
}

Answer 1

HTML 5提供data- *属性，您可以定义自己的属性，只为它们添加数据前缀。像data-info，data-zip等等。

Answer 2

我会使用JQuery来获取属性的值，使用此函数：

attr( attributeName )

类似的东西：

       $("select").change(function () {

          $("select option:selected").each(function () {
                var info = $(this).attr("info");
                alert(info);
              });

        })
        .trigger('change');

您可以使用相同的功能设置属性值：

 attr( attributeName, value )

check the API

Answer 3

onchange="selectionChange(this.options.item(this.selectedIndex).getAttribute('info'))"

Answer 4

由于您的用户使用旧浏览器，因此管道或字符分隔的字符串可能会起作用。

比如......

<select id="sel_activity" onchange="selectionChange(this)">
  <option value="|CAR">CAR PROBLEM</option> 
  <option value="|COFFEE">Coffee Break</option>
  <option value="45678|INV">INVENTORY COUNT</option>
  <option value="23567|INVDROP">Inventory</option>
  <option value="|LUNCH">Lunch Break</option> 
  <option value="87654|MEET">Meeting</option>
</select>

使用标准JavaScript ...

 function selectionChange(o) {
   // an alternative ...    
   var values = o.options[o.options.selectedIndex].value.split("|");            
   alert("Selected Index? "+(o.options.selectedIndex+1)
    +"\nInfo? "+values[0]
    +"\nValue? "+values[1]);
   values = null;
  }

Answer 5

最简单的方法是使用并行数组并给定选择值，它会在数组中找到值以显示您想要的其他信息值。

另一个选择是调用Web服务来查找给定值的信息，如果它对您的项目类型不是一种过度杀伤

Answer 6

class和id是用于此类信息存储的良好属性。但要记住的一点是，根据W3C标准，id不能以数字开头，因此如果您希望将数字存储为额外信息，则必须使用class或实现一些额外的Javascript，从id中提取数字，就像substr函数一样。

在HTML选择/选项下拉列表中携带一些额外信息

6 个答案: