How to refresh select option list after AJAX response

jquery refresh select options ajax
how to auto populate dropdown with jquery ajax
populate dropdown using jquery ajax php
ajax dropdown

I use fastSelect plugin http://dbrekalo.github.io/fastselect/ I have input tag, when change value i do a call ajax to php server. My problem is that When I inspect the item and I look in the options, I see the data I just added, but in the browser it does not display, sorry for the quality of my English any help please ?

Enclosed my code

                    <select id="Recherche_log_commune" name="Recherche[log_commune][]" class="multipleSelectDepCom" multiple="multiple">
                                <optgroup label="Communes">
                                </optgroup>         
                    </select>
                    <script> $('.multipleSelectDepCom').fastselect({maxItems: 10,noResultsText: 'Pas de résultat'}); </script>
                    <script> 
                    $("#leftBlockDashboard .fstQueryInput").on("change paste keyup", function(event) {
                        event.preventDefault();
                        getCommuneAndDepartement($(this).val());
                    });
                    function getCommuneAndDepartement(expression) {
                        var dataString = {expression: expression};
                        $.ajax({
                            url: '{{path('get_commune_departement')}}',
                            type: "POST",
                            data: dataString,
                            success: function(data){
                                $("#Recherche_log_commune").find('optgroup[label="Communes"]').empty();

                                $.each(data, function(){
                                    var option = '<option value="'+ this.com_id +'">'+ this.com_libelle +'</option>';
                                    $("#Recherche_log_commune").find('optgroup[label="Communes"]').append(option);
                                });

                                $('.multipleSelectDepCom').fastselect({
                                    maxItems: 10,
                                    noResultsText: 'Pas de résultat',
                                });
                            }
                        })
                    }
                    </script>


You will need to reattach the control after the options are loaded:

$('.selector').fastselect();

Even more complicated (to keep the selected value):

$('.selector').fastselect({
    onItemSelect: function($item, itemModel) {
        //load your stuff
        $('.selector').fastselect();
    }
});

Ajax with method selectpicker('refresh') · Issue #1481 , Code review · Project management · Integrations · Actions · Packages · Security · Team then in the success function, after updating the html, add back class / attr I have tried to refresh the select after each change, tried to render the as the underlying option elements have been updated when refresh is  I have an inventory application that uses a dynamic select list for locations, but I can't get the revised list to display correctly. The pop up box for How to refresh a select list? - jQuery Forum


You Will need to refresh the select2 after ajax call like this.

setTimeout(function(){
     $('#select2_id').fastselect();
},500);

Re Clicking Drop Down after Ajax Div Update doesn't work, Essentially making a selection in the first drop down should update. in the first drop down should update the div to show a second drop down list. of "​someservlet" and execute the following function with Ajax response text. so you mean you have to update all three select-nodes when adding a new option to one of them? as i said then you need something that does the following steps: 1. user adds an option 2. start your ajax-call and insert the option to the db 3. when inserted retrieve the data from the db 4. send back the result


ok solved , very rude but works ... on ajax callback here is what i do:

1) get a reference to original node ... in my case it is

var cc = $('#categories');

2) check if .fstElement exists

var fsexist = $(".fstElement").length > 0;

3) if exists remove it and reappend the original node

if (fsexist) {
  $('.fstElement').remove();
  $('#categories_div').append(cc);
}

4) reinit fastselect

$('#categories').fastselect({maxItems: 10,
                                        noResultsText: 'Choose categories'});

How to Auto populate dropdown with jQuery AJAX, On a dropdown option, I would like to listen in and get the value of the option value to a PHP variable for use in the later part of the blade view PHP script. I do not want to reload the page hence from the online look, I found ajax to be Ajax request is going to /selected/id , but route is set up to respond to  In this article, you will learn about AJAX call for dropdown lists in MVC. In today’s article, we will see how to populate a dropdown list in MVC, using AJAX call and on the basis of the selected value's first drop down, we will populate a second dropdown list. AJAX call is an asynchronous request initiated by the Browser to the Server with a


How to get the HTML select option in AJAX, On a dropdown option, I would like to listen in and get the value of a PHP variable for use in the later part of the blade view PHP script. I do not want to reload the page hence from the online look, I found ajax to be the only possible way. axios.get(url) .then(function (response) { let data = response.data;  How to refresh select option list after AJAX response You Will need to refresh the select2 after ajax call like this. What is the best way to add options to a


Ajax call to get the value selected from a HTML Select Option, 3. value; // use the selected option value to retrieve the list of 20 Sep 2017 We'll use Insert or Update or Delete Data From Table Value Parameter; Interview Q&A; i send a request through ajax to a php page, get the OPTION's in the response When you have a select box that needs to be populated using Ajax you will  How to Return AJAX Response from Asynchronous JavaScript Call: Methods and Code Examples Stackify July 26, 2017 Developer Tips, Tricks & Resources When JavaScript is used in conjunction with XML or REST APIs, you can create some useful behaviors with a set of web-development techniques collectively known as Ajax.


Ajax set select option value, This jQuery based tutorial will help you to learn how to load select option based on Here in this example, when a user selects country in first select field, jQuery on change //Function To List out Cities in Second Select tags function city(arr){ src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>​  now i m using meta refresh tag , this is annoying when user see the page, so i want to refresh without know to user. like ajax update . is any solution? iMeow September 5, 2014, 9:45am #10