Javascript dropdown updates the price based on the

问题:

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

回答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();
});

回答2:

You're changing the price based on the value, and using that as the item from your price array... but your price array only has 4 values. In your second select, you're asking it to return price[4] or price[5], which would cause an error.

Change this:

var price = new Array('','$2.00','$45.00','$60.00');

To this:

var price = new Array('','$2.00','$45.00','$60.00','$cloth price','$upvc price');

Fiddle here.

EDIT: Updated method (with minimal change to your existing layout/logic)

$(function() {
    $('select[name=material]').change(function() {
        var price = $(this).val().split("_");
        $("#id").html(price[0]);
        $("#price").html("$" + price[1]);
    });
});

HTML (adding the price to each option value, split by "_" in JS)

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

<select name="material">
    <option value="0_0">-- Please Select --</option>
    <option value="3_60">Metal</option>
    <option value="4_50">Cloth</option>
    <option value="5_80">UPVC</option>
</select>

<div>ID: <span id="id">TBD</span><br />Price: <span id="price">TBD</span></div>

回答3:

Update: Here is a jsfiddle with updated code to get your single price array to work:

Your price arrayhas a length of 4 and starts at index 0.

Your first option must have a value of '0' or it will return undefined from the price array:

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

When you set your option values from 3 to 5, you are trying to access non-existent indexes outside the bounds of your price array.