[MrMinde]

Hi,

I am new around and new to Javascripting, though I have had some years on my back with HTML and some PHP.

I am trying to create a drop-down menu, where each displayed name has a defined value.

For example
<option value=''>Adamstua</option>

I want that spesific option to have a number signed to it, like for example 670.

In my second drop down list, I chose for example <option>blabla</option> option blabla has a value of 100.

So depending on whether or not the second option is used or not, I want the website to calculate me the differences between the selected options?

If it helps any I am trying to create something similar to a price calculator with various options, and where each option makes a difference to the total price shown.

Thank you.

- Johnny

[scott2500uk]

document.getElementById("ID of list").value will bring in the value of the selection into javascript:

example:

Code:

<select onChange="alert(document.getElementById('myList').value)" id="myList">
  <option value="100">I'm Worth 100 Points</option>
  <option value="200">I'm Worth 200 Points</option>
  <option value="400">I'm Worth 400 Points</option>
  <option value="800">I'm Worth 800 Points</option>
</select>

[job0107]

There are many ways you can go about this:

Here are a couple examples that I can think of:

<script>
var value1="";
var value2="";
function Calculate_difference()
{
 document.getElementById("results").innerHTML = value1 - value2;
 }
</script>
<span>Value 1 </span>
<select onchange="value1=this.value;">
<option value="">Make a selection.</option>
<option value="1000">1000 points</option>
<option value="2000">2000 points</option>
<option value="3000">3000 points</option>
<option value="4000">4000 points</option>
<option value="5000">5000 points</option>
<option value="6000">6000 points</option>
<option value="7000">7000 points</option>
<option value="8000">8000 points</option>
<option value="9000">9000 points</option>
<option value="10000">10000 points</option>
</select>
<span> minus Value 2 </span>
<select onchange="value2=this.value;Calculate_difference();">
<option value="">Make a selection.</option>
<option value="100">100 points</option>
<option value="200">200 points</option>
<option value="300">300 points</option>
<option value="400">400 points</option>
<option value="500">500 points</option>
<option value="600">600 points</option>
<option value="700">700 points</option>
<option value="800">800 points</option>
<option value="900">900 points</option>
<option value="1000">1000 points</option>
</select>
<div><span>Difference = </span><span id="results"></span></div> 

<script>
var value1="";
var value2="";
function Calculate_difference()
{
 document.getElementById("results").innerHTML = value1 - value2;
 }
</script>
<span>Value 1 </span>
<select onchange="value1=this.value;Calculate_difference();">
<option value="">Make a selection.</option>
<option value="1000">1000 points</option>
<option value="2000">2000 points</option>
<option value="3000">3000 points</option>
<option value="4000">4000 points</option>
<option value="5000">5000 points</option>
<option value="6000">6000 points</option>
<option value="7000">7000 points</option>
<option value="8000">8000 points</option>
<option value="9000">9000 points</option>
<option value="10000">10000 points</option>
</select>
<span> minus Value 2 </span>
<select onchange="value2=this.value;Calculate_difference();">
<option value="">Make a selection.</option>
<option value="100">100 points</option>
<option value="200">200 points</option>
<option value="300">300 points</option>
<option value="400">400 points</option>
<option value="500">500 points</option>
<option value="600">600 points</option>
<option value="700">700 points</option>
<option value="800">800 points</option>
<option value="900">900 points</option>
<option value="1000">1000 points</option>
</select>
<div><span>Difference = </span><span id="results"></span></div>