javascript - 如何使用 javascript 或 jquery 在下拉列表中获取自定义属性的值

Question

我在网络表单上有下拉列表。我需要下拉列表中每个项目的“隐藏”变量，我可以使用 onchange 事件检索客户端。 所以在页面加载时，我在数据绑定(bind)下拉列表后设置了一个自定义属性:

For i = 0 To cboNameAL.Items.Count - 1
            cboNameAL.Items(i).Attributes.Add("Charge_Rate", usernamesAdapterDataTable.Item(i).ChargeRate)
Next

这有效，当我查看呈现的页面时，我看到下拉列表中每个项目的标记

<option value="05ab8c45-f7ce-4250-8458-1421e79e8a51" charge_rate="32">dave</option>

我的 javascript 函数在 onchange 事件中正常触发，但是我无法检索 Charge_Rate 的属性值。

我已经尝试了以下所有组合:

var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").selectedItem.attributes('Charge_Rate');

var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").attributes('Charge_Rate');

var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>")attr('Charge_Rate');

var lCharge_Rate = document.getElementById("<%=cboNameAL.ClientID%>").getAttributes('Charge_Rate');

每个都有 ('Charge_Rate') 或 ("Charge_Rate") 或 .Charge_Rate

我已经调试过了，我能做的最好的事情就是让我的变量 lCharge_Rate 为空。 有任何想法吗？如果不能以这种方式完成，很高兴返工......

Answer 1

您可以使用以下代码获取自定义属性的值

    //This line will load the DOM of dropdown 
    var cboNameAL = document.getElementById("<%=cboNameAL.ClientID%>");
    //This will return the selected option
    var selectedOption = cboNameAL.options[cboNameAL.selectedIndex];
    //This will give you the value of the attribut
    var charge_rate = selectedOption.attributes.charge_rate.value;