function return value to ajax data to process in ajax

I need help. Im trying to use the multiselect dropdown list dynamically (get record from db). I got the code for multiselect from the net.. below is the code (its working perfectly)

$('.multi').multi_select({
  selectColor: 'white',
  selectSize: 'small',
  selectText: 'Select Status',
  duration: 300,
  easing: 'slide',
  listMaxHeight: 300,
  selectedCount: 3,
  sortByText: true,
  fillButton: true,
  data: {
    "BD": "Bangladesh",
    "BE": "Belgium",
    "BF": "Burkina Faso",
    "BG": "Bulgaria",
    "BA": "Bosnia and Herzegovina",
    "BB": "Barbados",
    "WF": "Wallis and Futuna",
    "BL": "Saint Barthelemy",
    "BM": "Bermuda",
  },
    buttonWidth:"180px",
  onSelect: function(values) {
    console.log('return values: ', values);
  }
  });
        
        
  $('#get_values').on('click', function(event) {
            console.log($('#multi').multi_select('getSelectedValues'));
    $('.data-display').remove();
    var json = { items: $('#multi').multi_select('getSelectedValues') };
    if (json.items.length) {
      var ul = $('<ul>', { 'class': 'data-display' }).appendTo('body');
      $(json.items).each(function(index, item) {
        ul.append(
          '<li style="display: block;color:#000000;">' + item + '</li>'
        );
      });
    }
  })
$('#clear_values').on('click', function(event) {
  $('#multi').multi_select('clearValues');
  $('.data-display').slideUp(300, function() {
    $(this).remove()
  })
})

I want to replace the static data with data from DB. the approach that I wanted to take is to have a function to load the data. This is because this particular DropDown is a dependent on another form field.

so can I have a function return values to that data part of the script above?

Or is there another approach?

Edit: I would like to add dynamic values such of ajax response from another function.

function AnotherFunction(){ 
ajax_respond (arrayData); 
// format ("dataid1" : "datavalue1","data2":"datavalue2", ... and so on dynamically ) 
return ajax_resond 
} 
var dbData = AnotherFunction(); 
data: {dbData }, 

can this be accomplished? if it is possible, how can I return an array in that format from ajax response and insert into data {} of this multiselect

1 answer

  • answered 2020-11-25 07:18 Burhan Kashour

    after that script and after the page is loaded, start by creating an AJAX request to get the needed data:

    $.ajax({
        url: "data.php"
    }).done(function(data) {
        $.each([data], function(index, value) {
            $('.multi').multiSelect('addOption', {
                value: value.id,
                text: value.name
            });
        });
    });
    

    The multiselect part from jQuery Multiselect Page

    If you don't use the Multiselect Plugin, then use this:

    $.ajax({
        url: "data.php"
    }).done(function(data) {
        $.each([data], function(index, value) {
            $('#multi').append('<option value="'+value.id+'">'+value.name+'</option>'); //replace #multi with your select id or class selector
        });
    });