CODEWITHSUNDEEP
jqueryhtmlajax
Patrick Manser
Patrick Manser

Reputation: 1183

jQuery get all values of multiple select, not only selected

I'm trying to submit a whole multiple select (which is $('#tags_selected')) via Ajax

$.ajax({
  url: base_url + 'companies/editTagsAsync',
  type: 'post',
  dataType: 'json',
  data: $('#tags_selected').val(),
  success: function (json) {
    console.log(json);
  }
});

But it only sends the values that are selected. I want to pass ALL the values in the selectbox. There's probably an easy solution to this, but I just don't know it...

Upvotes: 1

Views: 8013

Answers (3)

Rajnikant Kakadiya
Rajnikant Kakadiya

Reputation: 2265

You need to send both selected and all values array.

var data: { 
        allValues: $('#tags_selected').find("option").map(function() {return this.value;}),
        selectedValues :$('#tags_selected').val()
    }
var data={ }
$.ajax({
  url: base_url + 'companies/editTagsAsync',
  type: 'post',
  dataType: 'json',
  data: data,
  success: function (json) {
    console.log(json);
  }
});

Upvotes: 0

Eli
Eli

Reputation: 14827

You can push all your select value into an array and send it through data:

var selectArr = []; 

$('#tags_selected option').each(function() {
    selectArr.push($(this).val());
});

$.ajax({
  url: base_url + 'companies/editTagsAsync',
  type: 'post',
  dataType: 'json',
  data: selectArr,
  success: function (json) {
    console.log(json);
  }
});

Upvotes: 4

Jon
Jon

Reputation: 437336

You need to find the <option> descendants of the dropdown and get their values:

data: { 
  values: $('#tags_selected').find("option").map(function() {return this.value;})
}

This way on the server side you will get an array named "values" with all the values. I have used .find() instead of .children() to get the options in anticipation of the drop down containing <optgroup> elements.

Upvotes: 0

Related Questions