从javascript函数中的下拉窗体调用多个用户选择

Question

我在教自己如何编写代码。我无法弄清楚如何采取从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未定义”。

Answer 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> 

并与一些进一步tweakings（添加一个按钮来触发DOB功能和使用IDS的替代名称）：http://jsfiddle.net/neewonej/

Answer 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); 

感谢