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:
Comments
Post a Comment