Use HTML dropdown list values with JavaScript

Question

This is what I'm trying to do:

The user selects either option "One" or option "Two". If the user select "One" the result is 66 + 45 or if the user select "Two" the result is 35 + 45.

How can I implement this using HTML and JavaScript?

This is what I've done so far:

HTML:

<select id="number">
  <option>One</option>
  <option>Two</option>
</select>

...

// Result
<div id="result"></div>

JAVASCRIPT:

function test(eventInfo) {

  var userSelection = document.getElementById("number").value;

  if () {
    result = 66 + 45;
  } else {
    result = 35 + 45;
  }

  var greetingString = userSelection;
  document.getElementById("result").innerText = greetingString;

}

Note that innerText isn't supported in some browsers.

RobG
– RobG

2013-05-22 06:24:05 +00:00
Commented May 22, 2013 at 6:24 — RobG
– RobG, Commented May 22, 2013 at 6:24

RobG · Accepted Answer · 2013-05-22 06:11:06Z

3

Consider:

<select id="number">
  <option value="66">One</option>
  <option value="35">Two</option>
</select>

then:

result = 45 + +document.getElementById("number").value;

answered May 22, 2013 at 6:11

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

PSL · Accepted Answer · 2013-05-22 06:26:06Z

2

How about this. Set the values in data-attribute and calculate the sum.

<select id="number">
    <option value="1" data-Values="66,45">One</option>
    <option value="2" data-Values="35,28">Two</option>
</select>
<div id="result"></div>

JS

 var values = this.options[this.selectedIndex].getAttribute('data-Values');
 var sum = eval(values.split(',').join('+')); //Use with caution eval.
 document.getElementById("result").innerHtml = sum;

Demo

edited May 22, 2013 at 6:26

answered May 22, 2013 at 6:13

PSL

124k21 gold badges257 silver badges243 bronze badges

Comments

radu florescu · Accepted Answer · 2013-05-22 06:06:58Z

0

Why don't you use value:

<select id="number">
  <option value="66+45">One</option>
  <option value="35+45">Two</option>
</select>

var greetingString = $("#number option:selected").val(); 
// or document.getElementById("number").value;
document.getElementById("result").innerText = greetingString;

answered May 22, 2013 at 6:06

radu florescu

4,36310 gold badges64 silver badges95 bronze badges

2 Comments

Karol Over a year ago

Do you want him to use eval? as from question it's clear, that he wants to actually add those numbers. Also how do you know he wants to use jQuery?

radu florescu Over a year ago

@Carlos eval is not recommended and he already know how to add 2 numbers.

Avin Varghese · Accepted Answer · 2013-05-22 06:15:58Z

0

Use Switch Statement:

Html:

<select id="number">
  <option value="66">One</option>
  <option value="35">Two</option>
</select>

Javascript:

var userSelection = document.getElementById("number").value;

    switch (userSelection)
    {
    case 66:
      result = 66 + 45;
      break;
    case 35:
      result = 35 + 45;
      break;
    }

edited May 22, 2013 at 6:15

answered May 22, 2013 at 6:11

Avin Varghese

4,3601 gold badge24 silver badges32 bronze badges

Comments

skparwal · Accepted Answer · 2013-05-22 06:17:18Z

0

You can try this one:

<select id="number" onchange="test(this.value);">
  <option value="66+45">One</option>
  <option value="35+45">Two</option>
</select>

...

// Result
<div id="result">here</div>

JS

<script>
function test(val) {
  document.getElementById("result").innerHtml = val;
}
</script>

answered May 22, 2013 at 6:17

skparwal

1,0746 silver badges15 bronze badges

Collectives™ on Stack Overflow

Use HTML dropdown list values with JavaScript

5 Answers 5

Comments

JS

Demo

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

JS

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related