Semantic/Fomantic UI and dropdowns

Help Requests
1

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.

2

This question has nothing to do with Aurelia per se. You’ll probably have a better chance at getting an answer by posting to Stack Overflow or by making an issue on the Fomantic repo.

If you’re only trying to set the selected value at the time you initialize the dropdown (which I’m gathering from the fact that you state you’d like to be able to do it in attached()), why don’t you just set selected: true in your data source, like they show in their tutorial? And if you’re initializing with HTML instead of JS, there’s got to be an equivalent way (like sticking a selected attribute on a certain div.item or something).

3

I figured it out with some poking around at aurelia tutorials and with reading more of the binding documentation.

If I add value.bind="selectedStatusCode" to the hidden input that I’m typing the search into, it loads the selected status code.