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


i have form have dropdowns have multiple properties .now on click of button want create array of values on key name dropdown name.but unable this. , have send data of each dropdown in query string 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 doing values :

$('form#add').find('select, input:text').each(function() {             var inputname = $(this).attr("name");             var inputvalue = $(this).val();             formdata +='&'+inputname+'='+inputvalue;         }); 

i want values in formdata :

list = ['21','22','23','24','2']     list1 = ['23','24','2']     list2 = ['22','24','2'] 

i create object(objval) , using .map() combine .get() add array selected values object(object key 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 example is:

enter image description here


Comments

Popular posts from this blog

c++ - OpenMP unpredictable overhead -

ruby on rails - RuntimeError: Circular dependency detected while autoloading constant - ActiveAdmin.register Role -

javascript - Wordpress slider, not displayed 100% width -