Javascript下拉菜单根据用户选择版本2更新价格

Javascript dropdown updates the price based on the users selection version 2?

本文关键字：更新 版本 选择 下拉菜单 用户 Javascript      更新时间：2023-09-26

我需要一些帮助来更新基于下拉选择的页面价格。

这是我们在一些帮助下写出来的代码:

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

谢谢恐龙

您正在根据值更改价格，并将其用作价格数组中的项目…但是你的价格数组只有4个值。在你的第二次选择中，你要求它返回price[4]或price[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');

小提琴。

EDIT:更新方法(对现有布局/逻辑的更改最小)

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

使用<select>的selectedIndex来选择价格:

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使用对象而不是数组:

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

Update:这是一个更新代码的jsfiddle，使您的单个价格数组工作:

你的价格数组长度为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，你试图访问不存在的索引以外的价格数组

相关文章：