Adding more than one attribute when using append in dropdown - jQuery

Question

I am trying to add more than one attr() value when using append in a dropdown in jQuery.

This is working fine:

$('#twostages').append($('<option/>').attr("value", option.stage).text(option.stage));

And I can access the value using:

document.getElementById("twostages").value

However, when I try this code:

$('#twostages').append($('<option/>').attr({ "value": option.stage, "matone": option.matone }).text(option.stage));

I am not able to retrieve the value or matone using the document.getElementById("twostages").value or document.getElementById("twostages").matone

I got the idea of the above code from this topic: jQuery: Adding two attributes via the .attr(); method

Any help would be greatly appreciated.

Thanks.

matone is not a default property and hens you can not access directly. You can use jquery .attr() in same way to get value — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Nov 5, 2018 at 7:02

Death-is-the-real-truth · Accepted Answer · 2018-11-05 07:13:46Z

2

matone is a property added on options.So you can't access it directly.

you need to check first the selected option and then get it's corresponding matone value using .attr()

Working snippet:-

$('#twostages').append($('<option/>').attr({ "value":"stage1", "matone": "mymetion" }).text("stage1"));

console.log($('#twostages').val());
console.log($('#twostages').find(':selected').attr('matone'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="twostages">

</select>

Reference:-

.attr()

:selected

Note:- Standered practice is to use data-attributes for custom attributes

edited Nov 5, 2018 at 7:13

answered Nov 5, 2018 at 7:07

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Death-is-the-real-truth Over a year ago

@HamzaAhmad glad to help you

Collectives™ on Stack Overflow

Adding more than one attribute when using append in dropdown - jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related