Clash Royale CLAN TAG#URR8PPP

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

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.

2 Answers
2

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?

$('select[name=street-select]').append

$('#street').append

@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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.