Need help to create dynamic smart select

Questions
1

I want to create a dynamic smart-select, when I select a country, then I want to create a smart-select with cities.

So onchange on the “country” select I would like to create a smart-select with specific “cities” for that country.

I create the smart-select, but how do I create the option values with the cities in the .js file?

On my webpage I have this form, but instead of listing the cities here, I want to create it in the .js file.

            <select id="country" class="country" name="country">
            <option value="">Select country</option>
                
                <option value="Sweden">Sweden</option>
                <option value="Denmark">Denmark</option>
                         
            </select>
            
            
             <a class="item-link smart-select" data-open-in="popover">
              <select name="cities" id="cities" name="cities" multiple>
              <option value="Varberg">Varberg</option>
              <option value="Falkenberg">Falkenberg</option>
              <option value="Halmstad">Halmstad</option>
             
            </select>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Select cities</div>
              </div>
            </div>
          </a>
            
             <button type="submit" class="knappar">SEARCH</button>

And in my .js file I have this onchange.

$$(document).on(“change”,".country", function() {
var country = $$(‘select[name=country]’).val()
//app.dialog.alert(country)

var smartSelect = app.smartSelect.create({
inputEl: ‘#cities’,
on: {
opened: function () {
console.log(‘Smart select opened’)
}
}
});
});

Any input really appreciated, thanks a lot!

2 
$('select#cities').html(`
<option>City 1</option>
<option>City 2</option>
...
`);

var smartSelect = app.smartSelect.create({
  inputEl: ‘#cities’,
  ...
})
3

Thanks a lot Vladimir, I will test it tomorrow. :slight_smile:

4

What is the best way to add/remove values of a smart-select dynamically? Example:

$('select#cities').html('<option>City 1</option><option>City 2</option>');

var smartSelect = app.smartSelect.create({inputEl: ‘#cities’});

I want to add/remove values after some user interactions (country change). Do i need to

smartSelect.destroy();

the smart-select and create a new one or is it possible to remove and add values?