如何选择更改事件上的选项并触发其他选择选项以进行响应？

Question

我试图使用javascript DOM操作将对象数组填充到表单中。 当用户选择饮料的大小时，另一个选项将根据变化反映价格。

例如。 在Latte>选择>小。 价格将变为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;
    }
};

我希望它适用于两者，但只有“Latte”选择选项有效。

Answer 1

你的代码几乎就在那里。 你唯一没有考虑的是id必须是唯一的。 因此， drinkSize.id = "drinkOption"将始终以同一元素为目标，这就是为什么你拿着latte和cappuccino不工作的错误。

我通过根据数组中的索引分配drinkID修复bug。

请参阅下面的代码。

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