Pass data via jQuery ajax from several drop down

Let us take this HTML as a sample -

<div id="vanyov">
  <select>
    <option value="Beer"></option>
    <option value="Wine"></option>
    <option value="Water"></option>
    ...
  </select>
  <select>
    <option value="Steak"></option>
    <option value="Pizza"></option>
    ...
  </select>
  ...
</div>
<!-- I hope I put the right choices in here.
everyone cool with Beer and Pizza right? ;) -->

You could use jQuery to return all the select elements you need and then parse though all of them adding them to a JSON object.

var valuesJSON = {};
$.each($("#vanyov select"),function(index,elem){
  valuesJSON[index] = $(elem).val();
});

This would add the values of all the <select> elements with in the #vanyov element.

But what's going on here? Lets take a look -

• var valuesJSON = {} - This is some shorthand code to create a new empty object named valuesJSON.
• $.each - This is a jQuery function that will loop though all the elements you give it. Arrays and Objects and especially groups of elements that jQuery selectors return. There is also a callback function that is passed each of the items that $.each found.
• $("#vanyov select") - Here we are telling jQuery to give us all of the <select> elements that are descendants of the #vanyov element.
• valuesJSON[index] - This is where we are adding a new item to the JSON. We use the index parameter because they are right there! Easy! The $.each function provides them.
• $(elem).val() - We wrap the elem parameter with $() to convert it into a jQuery object and then we use the val() function to extract the value of the <option> element within the dropdown that was selected.

Then send out your order with an Ajax call perhaps -

$.post('/ajax/lyubomir',valuesJSON,function(response){
  // Return values here
},"json");

_{I hope they come soon - After that, I'm starving...}