Javascript onchange - change variable based on select value

Question

So I'm trying to change a variable based on a select value and display it live when changed. I've already got it working by setting the variable in a static fashion but I don't understand how to change the variable if the select value is changed or increased.

In this case I'm trying to change a price based on quantity. Say if the quantity is more than X then the price changes to Y. Please keep in mind I am new to javascript so please keep your answers basic.

This is my current code:

HTML

<label>Single User</label>
<select class="input-mini" name="singleuser" id="singleuser" onchange="changed(this, 0, 34.95)">
    <option value="0">0</option>
    <option value="1">1</option>
</select>&nbsp;&nbsp;<font size="4"><b>@ $34.95/mo</b></font>

Javascript

var size = 36;
var cart = new Array();

for (var j = 0; j < size; j++) //initialize cart to all 0
    cart[j] = 0;

function changed(me, id, price) {
    var amount = me.options[me.selectedIndex].value; //quantity passed
    var t_price = amount * price; //multiply operation
    cart[id] = t_price; //update cart array
    update_spans();

    document.getElementById(id).value = amount; //update quantity for final page
}
function update_spans() {
    put("cart0", cart[0]);
}
function put(name, price) {
    try {
        price = (Math.round(price * 100) / 100); //round
        price = price.toFixed(2); //two decimal places
        document.getElementById(name).innerHTML = price; //put into span
    } catch (err) {
        //error
    }
}

Answer 1

Change your HTML and JavaScript parts with the code below

// HTML
<label>Single User</label>
<select class="input-mini" name="singleuser" id="singleuser" onchange="changed(this, 0, 34.95)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>    
</select>
&nbsp;&nbsp;
<span id="price">@ $34.95/mo</span>

// JavaScript (this is all you need)
var size = 36, cart = [];
var discount = [0, 5, 10, 15, 20, 25, 50];

for(var j = 0; j < size; j++) cart[j] = 0;

function changed(me, id, price){
    var amount = me.options[me.selectedIndex].value;
    var p_discount = amount * price * (discount[me.selectedIndex]/100);  
    var t_price = (amount * price) - p_discount;
    cart[id] = t_price;

    r_price = (Math.round(t_price*100)/100);
    r_price = r_price.toFixed(2);

    document.getElementById('price').innerHTML = '@ ' + r_price + '/mo'; 
}

Check the working jsBin