How do i set a value for a selectMenu programtically?

[arbel]

I want my UI to load with defaults, and I'm trying to set the value of the select, but it doesn't work:

directionMenu.value = defaults.direction;

is there another way?

thanks

Idan

[alexandrtovmach]

selectMenu.init() will check if you set some option to selected: https://github.com/thomas-lowry/figma-plugin-ds/blob/master/src/js/modules/selectMenu.js#L38

like this:

<select id="uniqueId" class="select-menu">
  <option value="1" selected>Item 1</option>
  <option value="2" >Item 2</option>
  <option value="3" >Item 3</option>
</select>

[ptahchiev]

Problem is if I change the select value programmtically the UI doesn't update it and shows the old value:

document.getElementById("slotId").value = val;

[MaxBazarov]

Problem is if I change the select value programmtically the UI doesn't update it and shows the old value:

document.getElementById("slotId").value = val;

Any ideas?

[MaxBazarov]

Ok, I created the following function to change a select dynamically.

function setSelectValue(cssSelector, value)
{
    /* Select HTML code source to operate with:
    <div class="select-menu"><select name="" id="select-menu1" class="select-menu" style="display: none;">
        <option value="">Make a selection</option>
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
        <option value="4">Item 4</option>
    </select><button class="select-menu__button"><span class="select-menu__label select-menu__label--placeholder">Make a selection</span><span class="select-menu__caret"></span></button>
        <ul class="select-menu__menu">
            <li class="select-menu__item" data-value="1" position="6"><span class="select-menu__item-icon"></span><span class="select-menu__item-label">Item 1</span></li>
            <li class="select-menu__item" data-value="2" position="30"><span class="select-menu__item-icon"></span><span class="select-menu__item-label">Item 2</span></li>
            <li class="select-menu__item" data-value="3" position="54"><span class="select-menu__item-icon"></span><span class="select-menu__item-label">Item 3</span></li>
            <li class="select-menu__item" data-value="4" position="78"><span class="select-menu__item-icon"></span><span class="select-menu__item-label">Item 4</span></li>
        </ul>
    </div>
    */

    if (value === "") return
    // Find original (but hidden now) <select> and set a new value
    const select = $(cssSelector).get(0)
    select.value = value
    // Find option to select            
    let selectOption = Array.from(select.options).filter(o => o.value == value)[0]
    // Change a button label
    const buttonLabel = $(cssSelector + "+button span").get(0)
    buttonLabel.innerHTML = selectOption.label
    // Find old <li> with selected option and unselect it
    const CLASS_SELECTED = "select-menu__item--selected"
    const liSelected = $(cssSelector + "+button+ul ." + CLASS_SELECTED)
    liSelected.removeClass(CLASS_SELECTED)
    // Find new <li> to select
    const CLASS_LI = "select-menu__item"
    const liSelect = $(cssSelector + "+button+ul ." + CLASS_LI + "[data-value='" + value + "']")
    liSelect.addClass(CLASS_SELECTED)
}
 setSelectValue("#select-menu1", "2")

It uses jQuery, but can be rewritten using pure JS.