Dynamic dropdown using jQuery

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view

Dynamic dropdown using jQuery

Hi guys!

I have a problem here. I am trying to update a dropdown menu when a user changes an input field. The dropdown doesn't refresh but the option tags inside it does. Let me show you what it looks like:

Here is my code in the html:

<div class="row" id="gymRow">
          <div class="col s12 l8" th:classappend="${#fields.hasErrors('gym')}? 'error' : ''">
                <select class="cs-select cs-skin-border inputElement" id="gymDropdown">
                    <option disabled="disabled" selected="selected">Choose a gym</option>
                    <option value="alma">Alma</option>
                    <option value="bela">Bela</option>
             <div class="error-message" th:if="${#fields.hasErrors('gym')}" th:errors="*{gym}"></div>

And here is my jquery:

$('#searchCities').change(function () {
        $.getJSON( "gymsByCityId?cityId=1", {
            ajax : 'true'
        }, function( data ) {
            //var items = [];
            var html = '';
            $.each( data, function( key, val ) {
                html += '<option value="' + val.name + '">'
                    + val.name + '</option>';

Can you please help me with this?
Thank you!