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

问题描述：

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

在我的项目中，我想要表单的序列化数据，但对于下拉列表，它只给出值而不是文本所选择的下拉值。 p>

 ＆lt; select name ='attend'＆gt; 
＆lt; option value =“1”selected =“selected”＆gt; Question＆lt  ; / option＆gt; 
＆lt; option value =“2”＆gt;参加＆lt; / option＆gt; 
＆lt; option value =“3”＆gt; not-attendnding＆lt; / option＆gt; 
＆lt; / select＆gt; 
  代码>  pre> 
 
 这里给出了= 1.我还希望所选选项的文本是“问题”。 p> 
  div>

答

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>

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

相关推荐