从javascript函数的下拉表单中调用多个用户选择答案

【问题标题】：Calling mulitple user selections from dropdown form in javascript function从javascript函数的下拉表单中调用多个用户选择
【发布时间】：2015-09-07 04:51:27
【问题描述】：

我正在自学如何编码。我不知道如何从 HTML 下拉表单中获取多个值并通过 javascript 将它们直接输入到预定义的函数中。（表单属性？）

<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
</select>

<p> Day </p>
<select name="Bdom">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p> Year </p>
<select name="Byear">
    <option value="2015">2015</option>
    <option value="2014">2015</option>
    <option value="2013">1988</option>
</select></form>

<script>
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
    return window.alert("Your number is " +z);
}
DOB(Bmonth, Bdom, Byear);
</script>

我只是想把用户提供的三个值输入到函数 DOB(Bmonth, Bdom, Byear);如果我像这样运行代码，它会显示“Bmonth 未定义。”

【问题讨论】：

你的JS函数在哪里？也请包括
我不明白它为什么重要。该函数相当长，但运行干净。
我会放一个简化版的。

标签： javascript forms function

【解决方案1】：

您还可以使用 javascript 框架或库来让您的生活更轻松。例如，使用 jQuery，您可以像这样调整您的代码：

<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
</select>

<p> Day </p>
<select name="Bdom">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p> Year </p>
<select name="Byear">
    <option value="2015">2015</option>
    <option value="2014">2015</option>
    <option value="2013">1988</option>
</select></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function DOB(Bmonth, Bdom, Byear) {
    var z=Byear-Bmonth*Bdom;
    return window.alert("Your number is " +z);
}
DOB(
    $('[name="Bmonth"]').val(),
    $('[name="Bdom"]').val(), 
    $('[name="Byear"]').val()
);
</script>

还有一些进一步的调整（添加一个按钮来触发 DOB 功能并使用 ID 代替名称）：http://jsfiddle.net/neewonej/

【讨论】：

哇。非常感谢。这真的有效。您能否指出我正确的方向，以便我可以更好地理解代码以便能够正确使用 jquery？推荐的参考资料？
我会选择 jQuery 的官方网站。他们有一个学习中心 (learn.jquery.com) 和一个 API 文档：api.jquery.com 这是我在 jQuery 中使用最多的一个资源。我在示例中使用的是 id 选择器 (api.jquery.com/id-selector) 和属性相等选择器 (api.jquery.com/attribute-equals-selector)、val 函数 (api.jquery.com/val) 和 click binder 函数 (api.jquery.com/click)。很高兴我能帮忙:)
另外，不要忘记将您的首选答案标记为已接受，并为您欣赏的答案投票：)

【解决方案2】：

首先将 name="" 更改为 id="" 以简化 javascript 选择。看起来像这样：

<form action="mywebsite.html">
<p> Month </p>
<select id="Bmonth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
</select>

<p> Day </p>
<select id="Bdom">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p> Year </p>
<select id="Byear">
    <option value="2015">2015</option>
    <option value="2014">2015</option>
    <option value="2013">1988</option>
</select></form>

您需要使用 tempElement = document.getElementById("Bmonth") 将选择框的句柄获取到 tempElement 变量。然后使用 tempElement.selectedIndex 获取选定的索引，并使该索引从 tempElement.options 中检索值。使用 tempElement.options[tempElement.selectedIndex].value 获取用户选择的等效值，否则使用 tempElement.options[tempElement.selectedIndex].text 获取选定文本。

这里是有效的 javascript 代码：

function DOB(Bmonth, Bdom, Byear) {
    var z=Byear-Bmonth*Bdom;
    return window.alert("Your number is " +z);
}
var tempElement = document.getElementById("Bmonth");
Bmonth = tempElement.options[tempElement.selectedIndex].value;

tempElement = document.getElementById("Bdom");
Bdom = tempElement.options[tempElement.selectedIndex].value;

tempElement = document.getElementById("Byear");
Byear = tempElement.options[tempElement.selectedIndex].value;

DOB(Bmonth, Bdom, Byear);

谢谢

【讨论】：