Adding 'selected' attribute to user's selected option after 'change' with jQuery

Question

I have a select element that I am adding options to dynamically using data from a variable called 'results':

HTML:

<select id="categories">
    <option selected disabled>Select your category</option>
</select>

jQuery:

$.each(results.Subcategories, function(index,category) {
    var category = '<option value="'+category.Name+'" data-index="'+index+'">'+category.Name+'</option>';
    $('#categories').append(category);
});

This works correctly and I am able to choose between the dynamically added options in the select element.

What I need to do now is get the 'value' attribute of the currently selected AFTER the user has chosen it from the added options. This is where I am getting stuck. I thought that something like this would work:

$('#categories').on('change', function() {
    var optionSelected = $("#categories option:selected", this);
    console.log($(optionSelected).data("value"))
});

But the selected attribute does not move on the options when I choose a new one, so I am unable to target that attribute to get the value.

Assuming the approach above is solid, how do I get my newly selected option to have the selected attribute so I can target it and get the value? Or is there a better approach that I'm missing? Thanks in advance.

just do $(this).val() or this.value to get the selected value. — DinoMyte
– DinoMyte, Commented Feb 11, 2016 at 23:55
@DinoMyte - but how do I know what 'this' is for the newly selected option, without the 'selected' attribute? — SilentDesigns
– SilentDesigns, Commented Feb 12, 2016 at 0:18
'selected' attribute specifies which option should be pre-selected in the select element when it is loaded. are you trying to insert the option from external event and have it displayed selected in the select element ? — DinoMyte
– DinoMyte, Commented Feb 12, 2016 at 0:20
I see, I think I misunderstood the selected attribute. All I really need to get is the value of the currently selected option after any change. — SilentDesigns
– SilentDesigns, Commented Feb 12, 2016 at 0:23
In that case, just do $(this).val() or this.value to get the current selected value. — DinoMyte
– DinoMyte, Commented Feb 12, 2016 at 0:25

Niall · Accepted Answer · 2016-02-12 00:38:23Z

1

Selected attribute will select an option from load. What you need is this.val() or you could use plain javascript and use getElementById(id of your option element).value() and get the value that way.

answered Feb 12, 2016 at 0:38

Niall

80410 silver badges28 bronze badges

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

3 Comments

SilentDesigns Over a year ago

Thanks, yes I was misunderstanding the use of the selected attr. Your solution is correct.

DinoMyte Over a year ago

It's this.value, not this.val()

Niall Over a year ago

You can use both. In jQuery it is $(this).val() and when using pure JavaScript you can use .value() His question tags jQuery. I just gave him the option of using either.

Collectives™ on Stack Overflow

Adding 'selected' attribute to user's selected option after 'change' with jQuery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related