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

Question

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']

See this demo http://jsfiddle.net/u41pcpyu/3/ – Balachandran Dec 02 '14 at 08:43 — Balachandran, Dec 02 '14 at 08:43

Alex Char · Accepted Answer · 2014-12-02T10:50:26.103

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:

enter image description here

score 0 · Answer 2 · answered Dec 02 '14 at 08:32

0

$('form#add').find('select').each(function() {
    var that = $(this);
    var list = [];
    that.find('option').each(function() {
        var val = $(this).attr('value');
        list.push(val);
    });
    return list;
});

answered Dec 02 '14 at 08:32

kapantzak

11,610
4
39
61

i have input types also in my form .so this will not work in case on input types – Developer Dec 02 '14 at 08:34
@Gaurav: please rephrase your question. – Prabhu Murthy Dec 02 '14 at 08:54

Balachandran · Answer 3 · 2014-12-02T08:56:43.320

0

try

var ar = [];
$("select.list_class").each(function () {
    var obj = {};   
    obj[$(this).attr("name")] = $(this).children().map(function () {
        return this.value;
    }).get();
    ar.push(obj);

});
console.log(ar);

DEMO

edited Dec 02 '14 at 08:56

answered Dec 02 '14 at 08:34

Balachandran

9,567
1
16
26

i have to send the data as a query string with ajax how could i do this ??kindly suggest – Developer Dec 02 '14 at 08:43
@Gaurav sorry If you need other answer ,then ask new question bcoz this ans is not useful for new visitors ,if you post new question some of users will give you great answer .... – Balachandran Dec 02 '14 at 08:49
@Gaurav see this link it will help you http://stackoverflow.com/questions/12693947/jquery-ajax-how-to-send-json-instead-of-querystring – Balachandran Dec 02 '14 at 08:52
Kindly help me in this question i have to send the data in a query string .Please help me – Developer Dec 02 '14 at 10:18

score 0 · Answer 4 · answered Dec 02 '14 at 08:47

var result = {};

$("select option").each(function(){
    var list = $(this).parent().attr("name");
    if(list in result){
        result[list].push($(this).val());
    }else{
        result[list] = [].push($(this).val());  
    }
});

console.dir(result);

score 0 · Answer 5 · answered Dec 02 '14 at 08:48

how about this

var list1 = [], list2 = [], list3 = [];

var $list1 = $("#list1").find("option");
$list1.each(function () {
  var $option = $(this).attr("value");
  list1.push($option);
});

var $list2 = $("#list2").find("option");
$list2.each(function () {
  var $option = $(this).attr("value");
  list2.push($option);
});

var $list3 = $("#list3").find("option");
$list3.each(function () {
  var $option = $(this).attr("value");
  list3.push($option);
});

console.log(list1);
console.log(list2);
console.log(list3);

jsfiddle

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

5 Answers5