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

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

这是我们在一些帮助下得出的代码：

    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>

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

    <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。希望这是有意义的，有人可以帮助我得到这个工作

谢谢

---

Dino

您正在根据该值更改价格，并将其用作价格数组中的项目。。。但是您的price数组只有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');

在这里

编辑：对现有布局/逻辑进行最小更改的更新方法

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

HTML将价格添加到每个选项值中，在JS中按u分割

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

---

您正在根据该值更改价格，并将其用作价格数组中的项目。。。但是您的price数组只有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');

在这里

编辑：对现有布局/逻辑进行最小更改的更新方法

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

HTML将价格添加到每个选项值中，在JS中按u分割

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

更新：要使单个价格数组正常工作，请执行以下操作：

你方价格为4，从指数0开始

第一个选项的值必须为“0”，否则将从价格数组返回未定义的值：

<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时，您正试图访问价格数组边界之外不存在的索引。

更新：要使单个价格数组正常工作，请执行以下操作：

你方价格为4，从指数0开始

第一个选项的值必须为“0”，否则将从价格数组返回未定义的值：

<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时，您正试图访问价格数组边界之外的不存在的索引。

只需使用您的：

或者，使用对象而不是数组作为价格：

---

只需使用您的选定索引选择价格：

或者，使用对象而不是数组作为价格：

---

---

是的，这也正是我发现的问题，但是有没有一种有效的方法来编译代码，这样它就可以与第二个下拉菜单一起工作，而不必向price数组中添加额外的值。第二个select的价格是多少？我还认为有更好的方法可以做到这一点，你可以将价格作为每个期权价值的一部分。你考虑过了吗？我想把价格设定为下拉值V，但是就应用而言，它更容易与ID一起使用。每个价格都是相同的吗？因此，1中的金属价格为60美元，2中的金属价格为2美元？是的，这也是我发现的确切问题，但是是否有一种有效的方法来简化代码，使其与第二个下拉菜单一起工作，而不向价格数组添加额外的值。第二个选择的价格是多少？我还认为有更好的方法可以做到这一点，你可以将价格作为每个期权价值的一部分。你考虑过了吗？我想把价格设定为下拉值V，但是就应用而言，它更容易与ID一起使用。每个价格都是相同的吗？因此，1中的金属成本为60美元，2中的金属成本为2美元？上述：-请选择-在未将值设置为0的情况下工作。我将如何处理，一个下拉列表，如果它的结构是这样的：-请选择-碳纤维玻璃棉以一种有效的方式，没有6242个价格数组？不，它将产生“未定义”作为输出，因为您将尝试在没有索引的情况下访问价格数组更正我的错误我没有看到未定义，因为我使用了：如果typeof metalprice[$this.val]==未定义{metalprice[$this.val]='from$1.00'}谢谢Paul和BumbleB2na。决定采用保罗的解决方案。非常感谢以上：-请选择-在未将值设置为0的情况下工作。我将如何处理，一个下拉列表，如果它的结构是这样的：-请选择-碳纤维玻璃棉以一种有效的方式，没有6242个价格数组？不，它将产生“未定义”作为输出，因为您将尝试在没有索引的情况下访问价格数组更正我的错误我没有看到未定义，因为我使用了：如果typeof metalprice[$this.val]==未定义{metalprice[$this.val]='from$1.00'}谢谢Paul和BumbleB2na。决定采用保罗的解决方案。许多感谢再次感谢您的回复。吉莉：我认为你的解决方案是处理页面上价格更新的最佳方式。再次感谢您的回复。吉莉：我认为你的解决方案是处理页面上价格更新的最佳方式。谢谢