javascript - javascript比萨菜单选择列表

Question

我刚开始学习 Javascript。我尝试为我的班级做一个披萨菜单，但我遇到了麻烦，我需要制作一个选择列表并将披萨大小选择放在那里，所以我做了：

<form name="pizzasize">
    <select name="pizzafirst" id="pizzafirst" onchange="findsize()">
        <option value="10" id="small">Small</option>
        <option value="12" id="medium">Medium</option>
        <option value="15" id="large">Large</option>
    </select>
</form>

当我点击尺码时，我会有不同的价格加起来，小号是10美元，中号是12美元；大的是15美元。所以我做了下面的代码：

var pizzafirst ;
function findsize(){
pizza1 = document.pizzasize.pizzafirst.selectedIndex;

if (pizzafirst == 0 ){
    document.getElementById('pform').innerHTML == + 10;
}
if (pizzafirst == 1 ){
    document.getElementById('pform').innerHTML == + 12;
}

if (pizzafirst == 2){
    document.getElementById('pform').innerHTML == + 15;
}
document.getElementById('pform').innerHTML = 0
}

Answer 1

有更好的方法可以做到这一点，因为您已经在选项中有值：

var pizza_select = document.getElementById('pizzafirst');
var result = document.getElementById('pform');

pizza_select.onchange = function () {
    result.innerHTML = '$' + this.value;
};

演示在这里

编辑：

您可以添加一个额外的 <option value="" id="select">Select a size...</option>.
我也在演示中添加了它。