Share On Twitter Facebook Google+ LinkedIn Pinterest Tumblr Reddit
Question

javascript select option by data-value

Tags: JavaScript Client-Side
Date:
Status:Resolved
Question Id:26

<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?

Answer
Date:
Correct:No

Seems to me that this HTML depends on some script or library? Bootstrap?

Answer
Date:
Correct:No

It's bootstrap. I want to make select data-value="AFG" but I dont't how to get it
How can i reference to it by javacsript ?

Because I want to add aria-selected="true" to the div that data-value="AFG" store in

Answer
Date:
Correct:No

Try this:
document.querySelector('.choices__item[data-id="3"]').setAttribute('aria-selected', 'true');
You can also refer to data-value directly:
document.querySelector('.choices__item[data-value="AFG"]').setAttribute('aria-selected', 'true');

Answer
Date:
Correct:No

it's work but still not yet selected.
seem I need to add more class name to it
is-selected is-highlighted

How to add class name?

Answer
Date:
Correct:No

Unfortunately I cannot find this in the docu of Bootstrap. You might give the class "active" a try:
document.querySelector('.choices__item[data-value="AFG"]').classList.add('active');

Answer
Date:
Correct:No

Is this the script you are using?
https://www.cssscript.com/customizable-select-box-input-field-enhancement-library-choices-js/
According to this try the class "is-active".

Answer
Date:
Correct:No

<div id="choices--p_nationality-pi-item-choice-1" class="choices__item
choices__item--choice
is-selected
choices__placeholder
choices__item--selectable
is-highlighted" role="option" data-choice="" data-id="1" data-value="" data-select-text="ກົດເລືອກ" data-choice-selectable="" aria-selected="true"></div>

I think I just need to delete class "is-selected" and "is-highlighted" from the default choice,

            `    document.querySelector('.choices__item[data-id="1"]').classList.remove('is-selected');
                document.querySelector('.choices__item[data-id="1"]').classList.remove('is-highlighted');`

I use this command but it not remove the class name.is it correct command?

Answer
Date:
Correct:No

It seems to me that this is a bit more complex. Try to simulate the user actions:

  1. Enter the required string into the input
  2. Simulate pressing the enter key as described here:

https://stackoverflow.com/questions/3276794/jquery-or-pure-js-simulate-enter-key-pressed-for-testing

Answer
Date:
Correct:No

I found it's the

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.`

Answer
Date:
Correct:No

Fine, does this mean that the issue is fixed now?

Answer
Date:
Correct:No

not yet, Can you guide me how to use javascript as example to select it base on real code?

<div class="choiceslist" role="listbox"><div id="choices--p_nationality-do-item-choice-1" class="choicesitem choicesitem--choice choicesplaceholder choicesitem--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="choicesitem choicesitem--choice is-selected choicesitem--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="choicesitem choicesitem--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="ALA" data-select-text="ກົດເລືອກ" data-choice-selectable="">Åland Islands</div>

Answer
Date:
Correct:No

Somewhere there must be code like you posted:

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

Try to find it by searching for "new Choices", you need the variable containing the choices object.
Or post the URL of your page.

Answer
Date:
Correct:No

... or try this code:

            // click the input in order to activate the options
            document.querySelector('input.choices__input').click();
            // mousedown on the required option in order to select it
            document.querySelector('.choices__item[data-id="1"]').dispatchEvent(new Event('mousedown'));
Answer
Date:
Correct:Yes

yes, it choice now but not selected as this image
![https://ibb.co/LYsjq14](https://)

now the problem is clear.

I found code

for(var i=0; i<choices.length;i++) {
  if (choices[i].classList.contains("multiple-remove")) {
    var initChoice = new Choices(choices[i],
      {
        delimiter: ',',
        editItems: true,
        maxItemCount: 5,
        removeItemButton: true,
      });
  }else{
    var initChoice = new Choices(choices[i]);

  }
}
so  i set 

initChoice.setChoiceByValue(country_code);

then it's work ^^

Your Answer

Review Your Answer