0

Let me preface this by saying that I have never used ChoicesJS so I am in a bit of a bind. The situation I find myself in is simple, I have a form with a select and I need to change the currently selected value to another in input.

So normally with jQuery I solve it in this way:

<div class="cjosul">
    <select>
        <option value="brovade">brovade</option>
        <option value="frico">frico</option>
        <option value="muset">muset</option>
    </select>
</div>

for example with jquery I can change the selected item with this code:

$("div.cjosul select").val("frico").change();

How can I achieve the same thing with ChoicesJS?

Below is the html part involved:

<div id="wpforms-756-field_6-container" class="wpforms-field wpforms-field-select wpforms-field-select-style-modern" data-field-id="6">
    <label class="wpforms-field-label" for="wpforms-756-field_6">Scegli un'esperienza tra quelle elencate o lascia vuoto per lasciarti ispirare</label>
    <div class="choices wpforms-field-row wpforms-field-medium" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true" aria-expanded="false">
        <div class="choices__inner">
            <select id="wpforms-756-field_6" class="wpforms-field-medium choicesjs-select choices__input choices__input--hidden" data-size-class="wpforms-field-row wpforms-field-medium" data-search-enabled="" name="wpforms[fields][6]" tabindex="-1" data-choice="active">
                <option value="" class="placeholder">Lasciati ispirare</option>
            </select>
            <div class="choices__list choices__list--single">
                <div class="choices__item choices__placeholder choices__item--selectable" data-item="" data-id="1" data-value="" data-custom-properties="null" aria-selected="true" data-deletable="">Lasciati ispirare
                    <button type="button" class="choices__button" aria-label="Remove item: ''" data-button="">Remove item</button>
                </div>
            </div>
        </div>
        <div class="choices__list choices__list--dropdown" aria-expanded="false">
            <div class="choices__list" role="listbox">
                <div id="choices--wpforms-756-field_6-item-choice-1" class="choices__item choices__item--choice is-selected choices__placeholder choices__item--disabled" role="option" data-choice="" data-id="1" data-value="" data-select-text="Schiaccia per selezionare" data-choice-disabled="" aria-disabled="true">Lasciati ispirare</div>
                <div id="choices--wpforms-756-field_6-item-choice-2" class="choices__item choices__item--choice choices__item--selectable is-highlighted" role="option" data-choice="" data-id="2" data-value="Adventurer trails" data-select-text="Schiaccia per selezionare" data-choice-selectable="" aria-selected="true">Adventurer trails</div>
                <div id="choices--wpforms-756-field_6-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="Carnia epic trails" data-select-text="Schiaccia per selezionare" data-choice-selectable="">Carnia epic trails</div>
                <div id="choices--wpforms-756-field_6-item-choice-4" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="4" data-value="Romea Strata" data-select-text="Schiaccia per selezionare" data-choice-selectable="">Romea Strata</div>
                <div id="choices--wpforms-756-field_6-item-choice-5" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="5" data-value="Addio al celibato / nubilato, compleanni e Team Building" data-select-text="Schiaccia per selezionare" data-choice-selectable="">Addio al celibato / nubilato, compleanni e Team Building</div>
            </div>
        </div>
    </div>
    <div class="wpforms-field-description">Scegli il servizio cicloturistico al quale vuoi partecipare, oppure lasciati consigliare dalla guida.</div>
</div>

Any hint or help is appreciated.

Bests

Alessio Somma
  • 1
  • 1

1 Answers1

0

Ok I've found the solution by myself.

You have to call this:

e.g. by data ID

document.querySelector('.choices__item[data-id="3"]').dispatchEvent(new Event('mousedown'));

OR by value

document.querySelector('.choices__item[data-id="Romea Strata"]').dispatchEvent(new Event('mousedown'));
Alessio Somma
  • 1
  • 1