/    Sign up×
Community /Pin to ProfileBookmark

javascript select option by data-value

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

to post a comment
JavaScript

17 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — Seems to me that this HTML depends on some script or library? Bootstrap?
Copy linkTweet thisAlerts:
@NitiphoneauthorFeb 28.2021 — 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
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — Try this:

`document.querySelector('.choices__item[data-id="3"]').setAttribute('aria-selected', 'true');</C><br/>
You can also refer to data-value directly:<br/>
<C>
document.querySelector('.choices__item[data-value="AFG"]').setAttribute('aria-selected', 'true');`
Copy linkTweet thisAlerts:
@NitiphoneauthorFeb 28.2021 — 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?
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — 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');`
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — 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".
Copy linkTweet thisAlerts:
@NitiphoneauthorFeb 28.2021 — &lt;div id="choices--p_nationality-pi-item-choice-1" class="choices__item<br/>
choices__item--choice <br/>
is-selected <br/>
choices__placeholder <br/>
choices__item--selectable <br/>
is-highlighted" role="option" data-choice="" data-id="1" data-value="" data-select-text="ກົດເລືອກ" data-choice-selectable="" aria-selected="true"&gt;&lt;/div&gt;


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');
<i> </i> 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?
Copy linkTweet thisAlerts:
@SempervivumFeb 28.2021 — 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
    Copy linkTweet thisAlerts:
    @NitiphoneauthorFeb 28.2021 — @Sempervivum#1628675

    I found it's the [](https://https://github.com/jshjohnson/Choices#user-content-setchoicebyvaluevalue)

    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, {<br/>
    choices: [<br/>
    { value: 'One', label: 'Label One' },<br/>
    { value: 'Two', label: 'Label Two', disabled: true },<br/>
    { value: 'Three', label: 'Label Three' },<br/>
    ],<br/>
    });

    example.setChoiceByValue('Two'); // Choice with value of 'Two' has now been selected.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 28.2021 — Fine, does this mean that the issue is fixed now?
    Copy linkTweet thisAlerts:
    @NitiphoneauthorFeb 28.2021 — not yet, Can you guide me how to use javascript as example to select it base on real code?

    <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>
    Copy linkTweet thisAlerts:
    @SempervivumFeb 28.2021 — Somewhere there must be code like you posted:
    ``<i>
    </i>const example = new Choices(element, {
    choices: [
    { value: 'One', label: 'Label One' },
    { value: 'Two', label: 'Label Two', disabled: true },
    { value: 'Three', label: 'Label Three' },
    ],
    });<i>
    </i>
    ``

    Try to find it by searching for "new Choices", you need the variable containing the choices object.

    Or post the URL of your page.
    Copy linkTweet thisAlerts:
    @SempervivumFeb 28.2021 — ... or try this code:
    ``<i>
    </i> // 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'));<i>
    </i>
    ``
    Copy linkTweet thisAlerts:
    @NitiphoneauthorMar 01.2021 — @Sempervivum#1628686

    yes, it choice now but not selected as this image

    ![https://ibb.co/LYsjq14](https://)

    now the problem is clear.

    I found code

    ``<i>
    </i>for(var i=0; i&lt;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);<i>
    </i>
    ``

    then it's work ^^
    Copy linkTweet thisAlerts:
    @SempervivumMar 01.2021 — Fine that you have found a solution.

    BTW: Please use code tags: `your code here` or triple backtics when posting code.

    I edited your posting accordingly.
    Copy linkTweet thisAlerts:
    @NitiphoneauthorMar 01.2021 — @Sempervivum#1628729 I just click on insert code and it give me single code. is it incorrect?
    Copy linkTweet thisAlerts:
    @SempervivumMar 01.2021 — The insert code button in the window for writing a posting inserts single backtics. Unfortunately these are not working reliably. Therefore I recommend using code tags or triple backtics instead.
    ×

    Success!

    Help @Nitiphone spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...