使用普通javascript使用父窗体(而非文档)时，获取所选选项html

Question

我有一个HMTL表单，它在网页上重复多次，为了防止针对每个表单的每个特定字段名，我正在做一个通用的javascript脚本，它检测触发的位置，并获取字段的值(从中遍历的特定表单的值(，以便使用ajax调用将其发送到另一个服务器。问题是，我找不到一种方法来获得选择下拉列表中的选定项目。

由于这是一个通用脚本，我不能使用ID值。

function sendForm(reference){
const form = reference.closest('form');
var elements = form.getElementsByTagName("input");
var name = elements.namedItem('name').value;
var mail = encodeURIComponent(elements.namedItem('email').value);
// Here I don't know how to get the selected item from the option group)
var program = elements.namedItem('program').value;  // (it doesn't work);
console.log(name)
console.log(mail)
/*
Ajax Stuff that is already solved  and not needed to show the point
*/
}

<form id="my-form" data-origin="form-1" action="">
<input placeholder="Name*" type="text" class="form-control" name="name" id="name" required>
<input type="email" class="form-control" placeholder="Email*" name="email" id="mail" required>
<select class="form-control" name="program" required>
<option name="programa" value="">- Select -</option>           
<option value="LCP">First choice</option>
<option value="LSP">Seccond choice</option>
<option value="LAE">Third choice</option>
<option value="LD">Fourth choice</option>
</select>
<button type="button" onclick="sendForm(this)" class="btn">Send</button>
</form>

Answer 1

var programa = document.getElementById('program').value;应该工作，只要<select>只允许选择一个选项。

Answer 2

如果查看HTMLSelectElement的MDN文档，您可以看到value属性将是所选选项的值(如果是<select multiple>元素，则为第一个所选选项(。

此外，HTMLFormElement有一个elements属性(请在此处阅读更多信息(，它返回表单中所有表单控件的集合(不仅是输入，还有<select>元素，这是您所需要的，而不是表单上的getElementsByTagName。

所以在你的代码中，你可以做：

const form = reference.closest('form');
const program = form.elements.namedItem('program').value;

旁注：如果要对一个变量使用const，请停止使用var。这是一个错误的特征。