I was able to get a search box/dropdown list populated and working properly using Fomantic/Semantic (there’s a fork), but I am struggling to set the value of the dropdown.
Here’s my html code:
<div id="statusBox" class="ui selection dropdown search">
<i class="dropdown icon"></i>
<input type="hidden" name="selectedStatusCode">
<div class="default text">Select A Status</div>
<div class="menu" data-value="selectedStatusCode">
<template repeat.for="statcode of status_code_list">
<div class="item" data-value="${statcode[0]}">
${statcode[0]}
</div>
<template repeat.for="descr of statcode[1]">
<div class="item" data-value="${descr.statcode_id}">
${descr.statcode_id} - ${descr.descr} (${statcode[0]})
</div>
</template>
</template>
</div>
</div>
here’s my javascript code:
(I can’t call it in attached()
because I’m loading stuff after the page is loaded, so I am calling it from an async
function.
async statusSelect()
{
console.log('status_code_list', this.status_code_list);
console.log('selectedstatuscode', this.selectedStatusCode);
$('#statusBox').dropdown('set selected', this.selectedStatusCode);
$(document).ready( function() {
$('#statusBox').dropdown('set selected', this.selectedStatusCode);
console.log('ready');
});
$('#statusBox').dropdown(
'set selected', this.selectedStatusCode).on('change',
e => {
console.log('e', e.target.value);
this.selectedStatusCode = e.target.value;
});
var d = document.form;
var dropdown = document.getElementById('statusBox');
console.log('1 dropdown', dropdown.selectedIndex);
dropdown.selectedIndex = this.selectedStatusCode;
document.getElementById('statusBox').selectedIndex = this.selectedStatusCode;
console.log('2 dropdown', dropdown.selectedIndex);
$('#statusBox').dropdown();
}
The change
listener works perfectly, I just need to be able to set the value when the dropdown is first loaded.
I have also tried adding the listener to load
, ready
, and onload
.
Any help would be appreciated.