How to Refresh Select Option List After Ajax Response

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

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?

Use AJAX response to update select option

$(document).on('click', '.renew', function() {
var user_id3 = $(this).attr("id");
$.ajax({
url: "../controller/fetch_single.php",
method: "POST",
data: {
user_id3: user_id3
},
dataType: "json",
success: function(data) {
// If the option is in the select
$('#bus_type').find('option[value="'+data.id+'"]').prop('selected', true);

// Or if the option is not there yet
var $option = $('<option></option>').html(data.type).attr('value', data.id).prop('selected', true);
$('#bus_type').append($option); // Adds the new option as last option
$('#bus_type').prepend($option); // Adds the new option as first option
}
})
});

Re-select option value after AJAX response

You should placed this code $("AttState").val(selState); inside success callback of AJAX request like so :

$.getJSON('GetPersonInfo.php?q=' + personId, function(data) {
$.each(data, function(key, val) {
$("#City").val(val.City);
selState = val(val.State);
// Plus all of the others...

});
// its depend on your code whether inside .each() or not
$("#AttState").val(selState);
});

reload data from select tag each ajax request

If I've understood your problem correctly, the issue is because you don't remove the option elements appended in the previous call when adding the next load of data. To fix this you can call empty() before adding the new options, like this:

$('#carousel_type').on('change', function() {
var selected = $(this).val();

$.ajax({
type: 'POST',
url: 'functions/get_subcase.php',
data: { subcase: selected },
dataType: 'JSON',
success: function(data) {
var $subcarousel = $('#subcarousel_type').empty(); // remove previously loaded options
for (i in data)
$subcarousel.append('<option value = ' + data[i].id + '>' + data[i].carousel_title + '</option>');
}
});
});

refresh select after Ajax load option called on click of select

I found this way, return false on the click event of #id_select-button , jquery mobile add the '-button' and open the options manually.

$('#select-choice-1-button').click(function(){

setTimeout(function(){
$('#select-choice-1').append('<option value="gg">TEST SUCCESS</option>');
$('#select-choice-1').selectmenu('refresh');
$('#select-choice-1').selectmenu('open');
}, 2000);

return false;
});

http://jsfiddle.net/HVahC/1/



Related Topics



Leave a reply



Submit