Get Multiple dropdowns value of a form and send as a query string in jquery

javascript, jquery

Solution

I create an object(`objVal`) and using .map() combine with .get() add an array with the selected values to that object(object key is the name of each select):

$('#add').on("click", function() {
  var objVal = {};
  $('select').each(function() {
    var arr = $(':selected', this).map(function() {
      return this.value;
    }).get();
    objVal[$(this).attr("name")] = arr;
  });
  console.log(objVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="" style="width: 147px;" id="list" name="list" class="list_class">
  <option value="21">A</option>
  <option value="22">B</option>
  <option value="23">C</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list1" name="list1" class="list_class">
  <option value="22">B</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<select multiple="" style="width: 147px;" id="list2" name="list2" class="list_class">
  <option value="22">B</option>
  <option value="24">D</option>
  <option value="2">E</option>
</select>
<input type='button' id='add' />

Result of this example is:

Problem

I have a form that have dropdowns that have multiple properties .Now on click of button i want to create array of values on the key name as the dropdown name.But i am unable to do this. And i have to send the data of each dropdown in a query string with ajax HTML ``` <select multiple="" style="width: 147px;" id="list" name="list" class ="list_class"> <option value="21">A</option> <option value="22">B</option> <option value="23">C</option> <option value="24">D</option> <option value="2">E</option> </select> <select multiple="" style="width: 147px;" id="list1" name="list1" class ="list_class"> <option value="22">B</option> <option value="24">D</option> <option value="2">E</option> </select> <select multiple="" style="width: 147px;" id="list2" name="list2" class ="list_class"> <option value="22">B</option> <option value="24">D</option> <option value="2">E</option> </select> ``` On button Click i am doing this to get the values : ``` $('form#add').find('select, input:text').each(function() { var inputName = $(this).attr("name"); var inputValue = $(this).val(); formData +='&'+inputName+'='+inputValue; }); ``` I want the values in the formdata as : ``` list = ['21','22','23','24','2'] list1 = ['23','24','2'] list2 = ['22','24','2'] ```

Original source

Related problems