How to find and set an HTML-Select option element using its data attribute?

Question

I have the following HTML:

<select name="1028071" class="LC" id="1028071" style="width: 100%;">
    <option selected="selected" value="-1">[Please select a value]</option>
    <option value="10604534" data-uid="154b2706-505e-401c-a066-a37a1889e3be">[Other]</option>
    <option value="10604535" data-uid="25070b3b-8215-440b-b3cf-c6cf52f01efc">Reason 1</option>
    <option value="10604536" data-uid="fd3394ea-a7e8-45e8-8385-71dee98238ff">Reason 2</option>
</select>

I am trying to pre-select [Other]. Both value and the text are variables. The only fixed value across environments is the data-uid.

I tried the following but it is not working:

var other = $(formalRequestReasonFieldId).find("option").filter(function() {
    return $(this).data('uid') == '154b2706-505e-401c-a066-a37a1889e3be';
});

alert(other.text()); // returns blank text
other.attr('selected', true); // does not work, no errors

$('option[data-uid="154b2706-505e-401c-a066-a37a1889e3be"]') — Andreas
– Andreas, Commented Jan 11, 2016 at 11:21
What you have should work fine: jsfiddle.net/ffw5quqr. Have you checked the console to ensure there are no errors, and the value of the uid you're searching for is what you expect it to be? — Rory McCrossan
– Rory McCrossan, Commented Jan 11, 2016 at 11:24
It should work, unless you are changing the uid value using the data api — Arun P Johny
– Arun P Johny, Commented Jan 11, 2016 at 11:26

Ali Mousavi · Accepted Answer · 2016-01-11 11:45:07Z

1

If formalRequestReasonFieldId is the Select tag ID :

var other = $('#'+formalRequestReasonFieldId).find('option[data-uid="154b2706-505e-401c-a066-a37a1889e3be"]');

//Other Text
var text = other.text();

//Select It
other.prop("selected", true);

JSFiddle: https://jsfiddle.net/6opqnxhy/

edited Jan 11, 2016 at 11:45

answered Jan 11, 2016 at 11:25

Ali Mousavi

9158 silver badges15 bronze badges

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

1 Comment

Moslem Ben Dhaou Over a year ago

The missing part is '#'.. Thanks. Just forgot to add it to the formalRequestReasonFieldId variable.

Collectives™ on Stack Overflow

How to find and set an HTML-Select option element using its data attribute?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related