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

时间:2012-06-10 02:09:50

标签: javascript html

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

此处有两个下拉列表,但“product”下拉列表指向同一个数组

正如你所看到的那样,我试图制作js但它仍然不起作用

我想问的是:

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

*对不起英语破碎

这是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>

这是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>

2 个答案:

答案 0 :(得分:2)

问题是你没有声明变量result1&amp; result2。另外,要获取金额,请使用document.quiz.amount1.value而不是document.quiz.amount1,依此类推amount2。再次比较下拉选择使用selection1[i].selected而不是selection1[i].checked

试试这段代码:

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

看起来已经回答:Get selected value in dropdown list using JavaScript?

至于整数值而不是字符串,为什么不转换呢? parseInt函数($ stringVal);