使用JQuery从<select>控件获取自定义html属性

Question

我想知道我在这里做错了什么？

我有以下HTML:

<select name="somename" id="DropDownList1">
    <option value=""></option>
    <option value="1" valp="7700000000000000">Item 1</option>
    <option value="2" valp="7C08000000000000">Item 2</option>
    <option value="3" valp="5800000000000000">Item 3</option>
</select>

以及在页面加载时调用的以下JS/JQuery代码:

$('#DropDownList1').change(function () {
    onChangeDropDownList1(this);
});

function onChangeDropDownList1(obj) {
    var vP = $(obj).attr('valp');
    alert("valp=" + vP);
};

结果我得到"valp = undefined"

Answer 1

this在.change()指向<select>而不是指向的上下文中<option>,因此您没有获得具有该valp属性的节点.

$('#DropDownList1').change(function () {
    onChangeDropDownList1(this);
});

function onChangeDropDownList1(obj) {
    // Get the selected option
    var vP = $(obj).find(':selected').attr('valp');
    alert("valp=" + vP);
};

这是一个演示.