Question

我需要一些帮助，根据下拉选项更新页面上的价格。

这是我们提出的一些帮助的代码：

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

如果我的下拉列表的结构如下：

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

但如果出于任何原因，下拉列表是这样的：

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

它不起作用（因为值选项不是1,2,3）。该值是材料的ID。希望这是有道理的，有人可以帮助我实现这个目标。

由于恐龙

Answer 1

您正在根据价值更改价格，并将其用作价格数组中的商品...但您的价格数组只有4个值。在你的第二个选择中，你要求它返回价格[4]或价格[5]，这会导致错误。

改变这个：

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

对此：

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

Fiddle此处。

编辑：已更新的方法（对现有布局/逻辑的更改很少）

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

HTML （将价格添加到每个选项值，在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>

Answer 2

更新： Here is a jsfiddle with updated code让您的单一价格阵列发挥作用：

您的价格数组的长度为4，从索引0开始。

您的第一个选项的值必须为'0'，否则它将从价格数组返回undefined：

<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>

当您将选项值设置为3到5时，您尝试访问价格数组范围之外的不存在的索引。

Answer 3

只需使用selectedIndex的{{1}}选择价格：

<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(); });的数组：

price

Javascript下拉列表根据用户选择版本2更新价格？

3 个答案: