最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Getting values as number from html dropdown menu with Javascript - Stack Overflow

programmeradmin1浏览0评论

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

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

<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

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

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

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

<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

<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>
Share Improve this question asked Jun 10, 2012 at 2:09 vincvinc 952 gold badges3 silver badges10 bronze badges 1
  • try this: stackoverflow./questions/1085801/… – Nick Commented Jun 10, 2012 at 2:15
Add a ment  | 

2 Answers 2

Reset to default 2

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

Try this code:

function RadioCheck() {

  var number = new Array(0, 20, 30, 40, 50, 60); //quotes will work but not remended 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>

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

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

发布评论

评论列表(0)

  1. 暂无评论