In my project I want the serialize data of the form, but for the dropdowns it gives the values only not a text of that selected value of drop down.
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
Here it gives attend = 1. I also want the text of that selected option that is "Question".
serialize() will only retrieve the name and value properties from an element.
To do what you require you can use serialize() as normal, then append the selected option text to it:
var data = $('form').serialize() + '&attendText=' + $('select option:selected').text();
console.log(data);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
</form>If you wanted to use serializeArray() you would need to push() the data to the resulting object, like this:
var data = $('form').serializeArray();
data.push({
name: 'attendText',
value: $('select option:selected').text()
});
console.log(data);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name='attend'>
<option value="1" selected="selected">Question</option>
<option value="2">Attending</option>
<option value="3">not-attending</option>
</select>
</form></div>