Question

我正在尝试使用JavaScript DOM操作将对象数组填充为表单。当用户选择饮料的大小时，另一个选项将根据更改反映价格。

例如。在“拿铁”下>选择>小。价格将变为3。

第一个有效，但另一个“卡布奇诺”无效。

getMyPrice函数有什么问题吗？

希望有人可以帮助我理解这一点。

尝试使用document.querySelectorAll选择所有的DrinkOption并进行for循环，但这不起作用。

const coffeeMenu = [
 {
    "name":"latte",
    "productVarient": [
        {
            "size": "large",
            "price": 5.9
        },
                {
            "size": "medium",
            "price": 4.5
        },
                {
            "size": "small",
            "price": 3.0
        }
    ]
},
    {
    "name":"cappuccino",
    "productVarient": [
        {
            "size": "large",
            "price": 4.9
        },
                {
            "size": "medium",
            "price": 3.5
        },
                {
            "size": "small",
            "price": 2.0
        }
    ]
 }      
]

window.onload = getMenu();

function getMenu(){
    var myMenu = document.createElement("div");
    document.body.appendChild(myMenu);
    var myform = document.createElement("form")
    myform.name="myForm"
    myMenu.appendChild(myform);

for(var i = 0; i < coffeeMenu.length; i++){
        let myMenuList = document.createElement('label');
        myMenuList.value = coffeeMenu[i].name;
        myMenuList.innerHTML = coffeeMenu[i].name;

        let drinkSize = document.createElement('select');
        drinkSize.id = "drinkOption";
        drinkSize.onchange = function(){getMyPrice()};
        let sizePrice =  document.createElement('Select');
        sizePrice.id = "priceOption";
        for(var j = 0; j < coffeeMenu[i].productVarient.length; j++){

            let singleSize = document.createElement('option');
            singleSize.className = "getSize";
            singleSize.value = coffeeMenu[i].productVarient[j].size;
            singleSize.innerHTML = coffeeMenu[i].productVarient[j].size;
            drinkSize.appendChild(singleSize);

            let singlePrice = document.createElement('option');
            singlePrice.className ="getPrice"
            singlePrice.value = coffeeMenu[i].productVarient[j].price;
            singlePrice.innerHTML = coffeeMenu[i].productVarient[j].price;
            sizePrice.appendChild(singlePrice);
        };

    myform.appendChild(myMenuList);
    myform.appendChild(drinkSize);
    myform.appendChild(sizePrice);

    };
}

function getMyPrice(){
var myLatte =  document.querySelector('#drinkOption');
var myLatteSize = myLatte.options[myLatte.selectedIndex].innerHTML;
var myLattePrice = document.querySelector('#priceOption');
    switch(myLatteSize){
        case "large":
        document.getElementById('priceOption').selectedIndex = "0";
        break;
        case "medium":
        document.getElementById('priceOption').selectedIndex = "1";
        break;
        case "small":
        document.getElementById('priceOption').selectedIndex = "2";
        break;
    }
};

我希望它对两者都适用，但只有“拿铁”选择选项有效。

Answer 1

您的代码几乎就在那里。您唯一没有考虑的是id必须是唯一的。因此drinkSize.id = "drinkOption"将始终以相同的元素为目标，这就是为什么您在latte工作且cappuccino不工作的情况下得到该错误的原因。

我通过根据数组中的索引分配drinkID来修复了您的错误。

请参见下面的代码。

const coffeeMenu = [
 {
    "name":"latte",
    "productVarient": [
        {
            "size": "large",
            "price": 5.9
        },
                {
            "size": "medium",
            "price": 4.5
        },
                {
            "size": "small",
            "price": 3.0
        }
    ]
},
    {
    "name":"cappuccino",
    "productVarient": [
        {
            "size": "large",
            "price": 4.9
        },
                {
            "size": "medium",
            "price": 3.5
        },
                {
            "size": "small",
            "price": 2.0
        }
    ]
 }
]

window.onload = getMenu();

function getMenu() {
    var myMenu = document.createElement("div");
    document.body.appendChild(myMenu);
    var myform = document.createElement("form");
    myform.name = "myForm";
    myMenu.appendChild(myform);

    for (var i = 0; i < coffeeMenu.length; i++) {
            let myMenuList = document.createElement('label');
            myMenuList.value = coffeeMenu[i].name;
            myMenuList.innerHTML = coffeeMenu[i].name;

            const drinkID = i;

            let drinkSize = document.createElement('select');
            drinkSize.id = `drinkOption-${drinkID}`;
            drinkSize.onchange = getMyPrice(drinkID);
            let sizePrice =  document.createElement('Select');
            sizePrice.id = `priceOption-${drinkID}`;

            for (var j = 0; j < coffeeMenu[i].productVarient.length; j++) {
                let singleSize = document.createElement('option');
                singleSize.className = "getSize";
                singleSize.value = coffeeMenu[i].productVarient[j].size;
                singleSize.innerHTML = coffeeMenu[i].productVarient[j].size;
                drinkSize.appendChild(singleSize);

                let singlePrice = document.createElement('option');
                singlePrice.className ="getPrice";
                singlePrice.value = coffeeMenu[i].productVarient[j].price;
                singlePrice.innerHTML = coffeeMenu[i].productVarient[j].price;
                sizePrice.appendChild(singlePrice);
            };

        myform.appendChild(myMenuList);
        myform.appendChild(drinkSize);
        myform.appendChild(sizePrice);
    };
}

function getMyPrice(drinkID) {
    return function() {
        var myLatte = document.querySelector(`#drinkOption-${drinkID}`);
        var myLatteSize = myLatte.options[myLatte.selectedIndex].innerHTML;
        var myLattePrice = document.querySelector(`#priceOption-${drinkID}`);
        switch(myLatteSize) {
            case "large":
                document.querySelector(`#priceOption-${drinkID}`).selectedIndex = "0";
            break;
            case "medium":
                document.querySelector(`#priceOption-${drinkID}`).selectedIndex = "1";
            break;
            case "small":
                document.querySelector(`#priceOption-${drinkID}`).selectedIndex = "2";
            break;
        }
    }
};

如何在更改事件上选择一个选项并触发另一个选择选项进行响应？

1 个答案: