如何在form.serialize中获取下拉值和文本？

Question

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".

Answer 1

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>