javascript select option by data-value

[nitiphone2021]

<div class="choices__list" role="listbox"><div id="choices--p_nationality-do-item-choice-1" class="choices__item choices__item--choice choices__placeholder choices__item--selectable" role="option" data-choice="" data-id="1" data-value="" data-select-text="ກົດເລືອກ" data-choice-selectable=""></div><div id="choices--p_nationality-do-item-choice-2" class="choices__item choices__item--choice is-selected choices__item--selectable is-highlighted" role="option" data-choice="" data-id="2" data-value="AFG" data-select-text="ກົດເລືອກ" data-choice-selectable="" aria-selected="true">Afghanistan</div><div id="choices--p_nationality-do-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="ALA" data-select-text="ກົດເລືອກ" data-choice-selectable="">Åland Islands</div>

According to I have list option as the code and I want to create a javascript to select it refer by data-id
Example I want to make data-value="AFG" selected, how can i do?

[requinix]

What Javascript code have you written so far, and what happened when you tried it?

[nitiphone2021]

I tried to select option base on data-value

now my javasript is work for 

document.querySelector('.choices__item[data-value="AFG"]').setAttribute('aria-selected', 'true');

But I need to add class name and remove some class name, I tried as below code but it's work

document.querySelector('.choices__item[data-value="AFG"]').addclass("is-selected is-highlighted");

[requinix]

What library are you using to make this select/option widget? It should provide an API for you to use where you can tell it which option you want to be selected and it will do the rest of the work for you.

[nitiphone2021]

I use choice js

[requinix]

If you're talking about jshjohnson/Choices then it looks like the setChoiceByValue method is what you need to use.

If you aren't talking about that then a link to its website would be nice - though I do recommend reading said website for information beforehand, in case the answer is there already.

[nitiphone2021]

Yes, you are right, it is jshjohnson, now i am looking for the way to create javascript to select it.

if on javascript, i have var name = AFG and AFG is a value of select option.

How can I create javascript to select it?

From example is mean create new choice? how about existing choice?

const example = new Choices(element, {
  choices: [
    { value: 'One', label: 'Label One' },
    { value: 'Two', label: 'Label Two', disabled: true },
    { value: 'Three', label: 'Label Three' },
  ],
});

example.setChoiceByValue('Two'); // Choice with value of 'Two' has now been selected.

 

Edited February 28, 2021 by nitiphone2021

[requinix]

Somewhere in your code you wrote "new Choices(...)". Hopefully you assigned that to a variable, like the example does with "const example =".

Call setChoiceByValue("AFG") on that variable.