Jquery remove, add and refresh select list after ajax call (handlebars, nodejs)

Question

i am trying to remove and add new options for a select list after user choose a value from another select box. I'm using ajax to call for the api and everything works fine. However, the html of the select list doesn't refresh at all after i remove or add new options. Am i doing wrong somehow?

My HTML generated with handlebars:

<select name="district" id="district">
   <option value="">Quận/ Huyện</option>
   <option value="1">District 1</option>
   <option value="2">District 2</option>
</select>


<select name="street-select" id="street">
   <option value="">Đường</option>
   {{#each streets}}
   <option value="{{name}}">{{name}}</option>
   {{/each}}
</select>

My javascript:

var dropdownStreet = $('#street');
var dropdownDistrict = $('#district');
 $('#district').change(function () {
                dropdownStreet.empty();
                dropdownStreet.html('')
                var value = $('#district').find(":selected").text();
                $.ajax({
                    type: 'GET',
                    url: `http://localhost:3002/api/ajaxcall/getLocation`,
                    data: {
                        'value': value
                    },
                    success: function (data) {
                        console.log('success');
                        var result = data.data.streets
                        var streets = [];
                        streets = result.map(function (a) { return a.location; });
                        for (var i = 0; i < streets.length; i++) {
                            $('select[name=street-select]').append('<option value="' + streets[i] + '">' + streets[i] + '</option>').selectmenu('refresh',true);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('error');
                    }
                })
            })

Thank you in advance.

Tran Audi · Accepted Answer · 2018-08-08T03:23:41.497

0

I've had a bug like you, and I did the following, and it worked. Try replacing your loop to something like this:

for (var i = 0; i < streets.length; i++) {
    $('select[name=street-select]').append(
        $('<option>', {
            value: streets[i],
            text: streets[i]
        })
    )
}

You can refer to here: Adding options to a <select> using jQuery?

edited Aug 08 '18 at 03:23

answered Aug 08 '18 at 03:12

Tran Audi

587
1
6
22

Thank you for the answer. But somehow my select list html still doesn't refresh after appending new options. It still remains the same. – hrtlkr29 Aug 08 '18 at 03:25
Try replacing `$('select[name=street-select]').append` to `$('#street').append` – Tran Audi Aug 08 '18 at 03:30
I tried to log it on console and i did get the result. However, it's an ajax request which call for an api to get data, so i'm wondering if there's anything matters with asynchronous calls here? – hrtlkr29 Aug 08 '18 at 03:32
And however, my select list have a lot of options at initialization, and i'm trying to empty the list whenever i select the "district" box. However, it still haven't worked either – hrtlkr29 Aug 08 '18 at 03:34
I do not know what you mean, in `console.log` you just indicated that the api call was successful, not sure if the result returned is data, it can be null or an empty array. so, you try `console.log(streets)` before loop `for`. – Tran Audi Aug 08 '18 at 03:44
I did. And i get an array of streets inside the selected district – hrtlkr29 Aug 08 '18 at 03:48
https://imageresize.org/view/c72a4bbb-f839-4fd1-98eb-86f8ea970045 I get an array like this – hrtlkr29 Aug 08 '18 at 03:51
Did you get any errors in the console tab of chrome developer tools? – Tran Audi Aug 08 '18 at 03:59
I tried doing what you did, and everything worked fine. – Tran Audi Aug 08 '18 at 04:00
You try: add `async: false` in ajax looks like this: `$.ajax({ async: false, type: "GET"......` – Tran Audi Aug 08 '18 at 04:05
A friend of mine eventually find out the bugs. It was because of my template, which is using zelect library. And somehow zelect doesn't reload the select box. So all i have to do is force zelect to reload and everything works fine now. However, i really appreciate your efforts – hrtlkr29 Aug 08 '18 at 04:10
Tell everyone what you find and how to solve it in this situation. – Tran Audi Aug 08 '18 at 04:11

score 0 · Answer 2 · answered Aug 08 '18 at 04:20

@Tran Audi's answer was fantastic. In addition, a friend of mine found out what makes the select box doesn't reload itself. He found out that the template of the website is using a library call Zelect. However, when i try to append the option, Zelect somehow does not reload the select box. So all i have to do is forcing Zelect to reload the selet box and everything works fine.

$(".intro.street .zelect").remove()
$('.intro.street select').zelect({})

I have to add these lines after appending the options.

Jquery remove, add and refresh select list after ajax call (handlebars, nodejs)

2 Answers2