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

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 )

检查API