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
How to Change Height in Mat-Form-Field
How to Assign [(Ngmodel)] With an Empty/Null/Undefined Object - Angular 4
Save Only Date Without Timezone JavaScript
React Passing Import Name as Prop and Adding to Image Src
Stop Chrome Back/Forward Two Finger Swipe
How to Use Owl Carousel Vertically
How Insert JavaScript into Vue File
Calculate Distance Between Two Moving Elements
How to Redirect to Another Component Onsubmit Search
Ngoninit Not Being Called When Injectable Class Is Instantiated
How to Block +,-,E in Input Type Number
Force Facebook to Open Link in External Browser for Smart Phones
Syntaxerror: Unexpected Token O in Json At Position 1
Json to CSV Flattening Nested Json
How to Create a Dynamic Jquery Data Table With Json Data and Ajax