Javascript 使用Javascript从html下拉菜单中获取数值作为数字

Getting values as number from html dropdown menu with Javascript

提问by vinc

I tried to show an alert box which content will change everytime the user pick different selection on the dropdown list.

我试图显示一个警告框，每次用户在下拉列表中选择不同的选择时，内容都会改变。

There are two dropdown list here, but the "product" dropdown list is pointed to the same array

这里有两个下拉列表，但“产品”下拉列表指向同一个数组

As you can see that I've tried to make the js but it still does not work

正如你所看到的，我已经尝试制作 js 但它仍然不起作用

What I want to ask is:

我想问的是：

• How do we get values from dropdown menu?
• And how do we get the values from a dropdown list as an integer, not string?

• 我们如何从下拉菜单中获取值？
• 我们如何从下拉列表中获取整数而不是字符串的值？

*sorry for the broken english

*抱歉英语不好

Here's the javascript

这是javascript

<script language="javascript">
function RadioCheck() {

var number = new Array('0', '20', '30', '40', '50', '60');
var selection1 = document.quiz.product1;
var selection2 = document.quiz.product2;
var amountselection1 = parseInt(document.quiz.amount1,10);
var amountselection2 = parseInt(document.quiz.amount2,10);

for (i=0; i<selection1.length; i++) {
if (selection1[i].checked == true) {
    result1=number[i]*amountselection1;
}
}

for (i=0; i<selection2.length; i++) {
if (selection2[i].checked == true) {
    result2=number[i]*amountselection2;
}
}


var result = (result1 + 'is the first result, and' + result2 + 'is the second result');
alert(result);
return false;
}

</script>

Here is the HTML

这是 HTML

<form name="quiz">

<select id="product1">
<option name="product1" value="0" selected="selected"> </option>
<option name="product1" value="1">Product 1</option>
<option name="product1" value="2">Product 2</option>
<option name="product1" value="3">Product 3</option>
<option name="product1" value="4">Product 4</option>
<option name="product1" value="5">Product 5</option>
</select>

<select id="amount1">
<option name="amount1" value="0" selected="selected">0</option>
<option name="amount1" value="1">1</option>
<option name="amount1" value="2">2</option>
<option name="amount1" value="3">3</option>
<option name="amount1" value="4">4</option>
<option name="amount1" value="5">5</option>
</select>

<select id="product2">
<option name="product2" value="0" selected="selected"> </option>
<option name="product2" value="1">Product 1</option>
<option name="product2" value="2">Product 2</option>
<option name="product2" value="3">Product 3</option>
<option name="product2" value="4">Product 4</option>
<option name="product2" value="5">Product 5</option>
</select>

<select id="amount2">
<option name="amount2" value="0" selected="selected">0</option>
<option name="amount2" value="1">1</option>
<option name="amount2" value="2">2</option>
<option name="amount2" value="3">3</option>
<option name="amount2" value="4">4</option>
<option name="amount2" value="5">5</option>
</select>

<input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

回答by vinc

Problem is you haven't declared variables result1& result2. Also to get amount selected use document.quiz.amount1.valueinstead of just document.quiz.amount1, so on for amount2. Again to compare dropdown selection use selection1[i].selectedinstead of selection1[i].checked.

问题是你没有声明变量result1& result2。还要获得选定的数量，document.quiz.amount1.value而不仅仅是document.quiz.amount1，等等amount2。再次比较下拉选择使用selection1[i].selected而不是selection1[i].checked.

Try this code:

试试这个代码：

function RadioCheck() {

  var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not recommended for numbers
  var selection1 = document.quiz.product1;
  var selection2 = document.quiz.product2;
  var amountselection1 = parseInt(document.quiz.amount1.value, 10); //changed
  var amountselection2 = parseInt(document.quiz.amount2.value, 10); //changed
  var result1 = 0, result2 = 0; //added line

  for (i = 0; i < selection1.length; i++) {
    if (selection1[i].selected) { //changed
      result1 = number[i] * amountselection1;
    }
  }

  for (i = 0; i < selection2.length; i++) {
    if (selection2[i].selected) { //changed
      result2 = number[i] * amountselection2;
    }
  }


  var result = (result1 + 'is the first result, and ' + result2 + 'is the second result');
  alert(result);
  return false;
}

<form name="quiz">

  <select id="product1">
    <option name="product1" value="0" selected="selected"></option>
    <option name="product1" value="1">Product 1</option>
    <option name="product1" value="2">Product 2</option>
    <option name="product1" value="3">Product 3</option>
    <option name="product1" value="4">Product 4</option>
    <option name="product1" value="5">Product 5</option>
  </select>

  <select id="amount1">
    <option name="amount1" value="0" selected="selected">0</option>
    <option name="amount1" value="1">1</option>
    <option name="amount1" value="2">2</option>
    <option name="amount1" value="3">3</option>
    <option name="amount1" value="4">4</option>
    <option name="amount1" value="5">5</option>
  </select>

  <select id="product2">
    <option name="product2" value="0" selected="selected"></option>
    <option name="product2" value="1">Product 1</option>
    <option name="product2" value="2">Product 2</option>
    <option name="product2" value="3">Product 3</option>
    <option name="product2" value="4">Product 4</option>
    <option name="product2" value="5">Product 5</option>
  </select>

  <select id="amount2">
    <option name="amount2" value="0" selected="selected">0</option>
    <option name="amount2" value="1">1</option>
    <option name="amount2" value="2">2</option>
    <option name="amount2" value="3">3</option>
    <option name="amount2" value="4">4</option>
    <option name="amount2" value="5">5</option>
  </select>

  <input type="submit" value="Check Answer" onClick="RadioCheck(); return false;">
</form>

回答by Nick

Looks like this was already answered: Get selected value in dropdown list using JavaScript?

看起来这已经得到了回答：使用 JavaScript 在下拉列表中获取选定的值？

As for the integer values instead of strings, why not just convert? parseInt($stringVal);

至于整数值而不是字符串，为什么不直接转换？parseInt($stringVal);