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 — Alive to die - Anant, Nov 05 '18 at 07:02

Alive to die - Anant · Accepted Answer · 2018-11-05T07:13:46.887

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

@HamzaAhmad glad to help you – Alive to die - Anant Nov 05 '18 at 07:43 — Alive to die - Anant, Nov 05 '18 at 07:43

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

1 Answers1