如何使用javascript或jquery在dropdownlist中获取自定义属性的值?

I have dropdownlist on a webform. I need a 'hidden' variable per item in the dropdown list which I can retrieve clientside using the onchange event. So on the page load I'm setting a custom attribute after I databind the dropdownlist:

我有一个webform的下拉列表。在下拉列表中，我需要一个“隐藏”变量，我可以使用onchange事件来检索clientside。在页面加载中，我设置了一个自定义属性在我数据库下拉列表之后:

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

This works and when I look at my rendered page I see this markup for each item in the dropdownlist

这是可行的，当我查看我的渲染页面时，我看到了下拉列表中每个条目的标记

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

My javascript function is firing fine from the onchange event, however I can't retrieve the attribute value for Charge_Rate.

我的javascript函数在onchange事件中运行良好，但是我无法检索Charge_Rate的属性值。

I've tried every combination of:

我尝试了所有的组合:

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');

Each with either ('Charge_Rate') or ("Charge_Rate") or .Charge_Rate

每个都有(“Charge_Rate”)或(“Charge_Rate”)或.Charge_Rate

I've debugged and the best I can do is for my variable lCharge_Rate to be null. Any ideas? Happy to rework if it can't be done this way...

我已经调试过了，我能做的最好的事情就是让变量lCharge_Rate为null。什么好主意吗?如果不能这样做，我很乐意再做一次……

4 个解决方案

#1

You can use the following code to get the value of your custom attribute

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

    //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;

#2

You need to select the options first before you can get the attribute.

在获取属性之前，您需要先选择选项。

var e = document.getElementById("client_id"),
lCharge_Rate = e.options[e.selectedIndex].getAttribute('charge_rate');

document.write("Charge Rate = "+lCharge_Rate);

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

#3

Create a variable that equals the value of your custom attribute, then use it as you desire. See my example and adjust as needed.

创建一个与自定义属性值相等的变量，然后根据需要使用它。请参见我的示例并根据需要进行调整。

var $divAtribut = $("div").attr("Charge_Rate");
alert($divAtribut);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div Charge_Rate="4424">Click on run to get the attribute</div>

#4

<code>
<!– my html –>
<select name="custom-select-two">
<option value="1" data-monthvalue="31">Jan</option>
<option value="2" data-monthvalue="28">Feb</option>
<option value="3" data-monthvalue="31">Mar</option>
<option value="4" data-monthvalue="30">Apr</option>
<option value="5" data-monthvalue="31">May</option>
<select>

<!– Get value of option’s custom attribute value from dropdown or select box –>
<script type="text/javascript">
$(document).ready(function(){
var monthvalue = $('.custom-select-two :selected').data('monthvalue');
alert(monthvalue); // here comes your dropdown option's custom attribute value
});
</script>

</code>

#1