Server Side data return not working

[Fzoltan87]

The data coming from the server side is not loaded into the dropdown list when we add dselect (If I don't use the dselect add-on, the data reload works).

The code HTML:

<label for="states" class="control-label">Country</label>
<select name="dc_countryID" id="country" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
<option value="0">USA</option>
<option value="0">Brazil</option>
</select>

<label for="states" class="control-label">State</label>
<select name="dc_stateID" id="states" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
</select>


<label for="cities" class="control-label">City</label>
<select name="dc_cityID" id="cities" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
</select>

Javascript code: (#states and #cities select tag ID)

let selectList = document.querySelectorAll('.selectlist');
if (selectList != null) {
  for (const sl of selectList) {
	  dselect(sl, { search: true });
  }
}

$(document).ready(function(){

$("#country").on("change",function() {
var countryID = $(this).val();

$.ajax({
  url: "action_ajax.php",
  type: "POST",
  cache: false,
  data: {countryID:countryID},
  success: function(data) {
  console.log(data);
  $("#states").html(data);
},
  error: function (jqXHR, textStatus, errorThrown) { 
  errorFunction(); 
}

});
});

$("#states").on("change",function() {
var statesID = $(this).val();

$.ajax({
  url: "action_ajax.php",
  type: "POST",
  cache: false,
  data: {statesID:statesID},
  success: function(data) {
  console.log(data);
  $("#cities").html(data);
},
  error: function (jqXHR, textStatus, errorThrown) { 
  errorFunction(); 
}
});
});
});

[Rpgdudester]

hey @Fzoltan87, if you want it to work after you load the data from the server side, add the dselect after you load the $("#states") data,

success: function(data) {
console.log(data);
$("#states").html(data);
dselect(document.querySelector('#states'));
},

same for the cities one.

I had the same issue and that was the best way i could make it work.

[Fzoltan87]

hey @Fzoltan87, if you want it to work after you load the data from the server side, add the dselect after you load the $("#states") data,

success: function(data) { console.log(data); $("#states").html(data); dselect(document.querySelector('#states')); },

same for the cities one.

I had the same issue and that was the best way i could make it work.

Hy, Do you only need to call the dselect function here (success:function(data))?

You don't need this code then?
let selectList = document.querySelectorAll('.selectlist');
if (selectList != null) {
for (const sl of selectList) {
dselect(sl, { search: true });
}
}

[Rpgdudester]

the reason why it's not working, is because you're adding to the #states and #cities dynamically (aka from the server) after you load the page. the javascript code would work if you were loading that data at the beginning.

I have a main dropdown that has all the data populated for example #states only and use the javascript for that one. then when #states changes, update cities and use the dselect on success to update the #cities one to use it. (or you can get rid of the javascript code in general and use:

$(document).ready(function () {
dselect(document.querySelector('#states'));
});

but you still need the dselect at the bottom of success for it to register that you want to use dselect on that dropdown.

[Fzoltan87]

I managed to solve it.

The country dropdown does not close after selection. The county and city drop-down list closes automatically. Any ideas?
I managed to solve it.