Open arbel opened 4 years ago
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>
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;
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?
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.
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