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

Gyurmatag
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>
                </select>
             <div class="error-message" th:if="${#fields.hasErrors('gym')}" th:errors="*{gym}"></div>
          </div>
 </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 ) {
                alert(val.name);
                html += '<option value="' + val.name + '">'
                    + val.name + '</option>';
            });
            alert(html);
            $('#gymDropdown').empty().append(html);
        });
    });

Can you please help me with this?
Thank you!