Question

I needed some help updating the price on a page based on a dropdown selection.

This is what code with some help we came up with:

    var price = new Array('','$2.00','$45.00','$60.00');
    $(function(){
        $('select[name=material]').change(function(){
          document.getElementById('pprice').innerHTML = price[$(this).val()];
        }); 

        // Trigger on dom ready
        $('select[name=material]').change();
    });

Which works if my dropdown is structured like this:

    <select name="material">
        <option value="">-- Please Select --</option>
        <option value="1">Wood</option>
        <option value="2">Plastic</option>
        <option value="3">Metal</option>
    </select>

But if for any reason the the dropdown was to be like this:

    <select name="material">
        <option value="">-- Please Select --</option>
        <option value="3">Metal</option>
        <option value="4">Cloth</option>
        <option value="5">UPVC</option>
    </select>

it would not work (because the value option is not 1,2,3). The value is the id for the material. Hope this makes sense and that someone can help me to get this working.

Thanks
Dino

Answer 1

Just select price using the selectedIndex of your <select>:

var price = new Array('','$2.00','$45.00','$60.00');
$(function(){
    $('select[name=material]').change(function(){
        document.getElementById('pprice').innerHTML = price[this.selectedIndex];
    });

    // Trigger on dom ready
    $('select[name=material]').change();
});

Or, use an object instead of an array for price:

var price = {
    "4": "$2.00",
    "5": "$45.00",
    "6": "$60.00"
};
$(function(){
    $('select[name=material]').change(function(){
        document.getElementById('pprice').innerHTML = price[$(this).val()];
    });

    // Trigger on dom ready
    $('select[name=material]').change();
});