1

我在处理部分 JavaScript 作业时遇到了一些麻烦。它涉及使用几个数组：一个有元素，一个没有元素，如下所示。我已经包含了数组工作所必需的所有代码，因此您不会对任何细节一无所知，我会在进行时进行解释。

下面是两个数组。数组 'toppings' 填充了稍后也会出现在列表框中的元素。它下面的数组“selectedToppings”是一个空数组，它将保存用户从列表框中选择的元素。

var toppings = [ "Sausage" , "Pepperoni" , "Extra Cheese" , "Onions" ,
"Black Olives" , "Anchovies" , "Pineapple" , "Canadian Bacon" , "Ground Beef" ];

var selectedToppings = [];

下面的函数是程序的输出。当我第一次编写它时，它没有显示任何内容，因为没有一个函数调用是正确的。我最近一直在做的是在每个函数调用之后放置一个分号，并确保适当的函数在继续下一个函数之前正常工作。现在我被困在函数 ToppingsWanted() 上。您会注意到“应付金额：”后面有一个分号——这是我之前提到的分号。我很确定函数调用是正确的，因为函数 quantity() 和 Size() 在它完美工作之前就出现了。

function thankYou()
{
document.pizzaForm.OrderText.value="Thank you for your order from BHC Pizza!\nYou have
ordered " + quantity() + " " + Size() + " pizza(s) with\n" + ToppingsWanted() +
"AmountDue "; 
}

您在下面看到的函数 ToppingsWanted() 让我感到悲伤。我已经尝试了很多方法来让它工作，但没有任何反应。我访问过这个网站，检查过 w3c 学校，但找不到任何关于如何完成这项工作的答案。在这一点上，我对 JavaScript 数组的了解还不够，无法知道这里出了什么问题。需要发生的事情是：当用户从我之前提到的列表框中选择一个浇头（函数下方显示的代码）时，从 toppings 数组中取出适当的元素并放入 selectedToppings 数组中，然后函数调用将在自己的行上显示 selectedToppings 数组中的每个元素。根据 Dreamweaver，没有任何语法错误，但我无法判断是否有任何逻辑错误。帮助？

function ToppingsWanted()
{
for (var i=0; i<10; i++);
{
    if (document.pizzaForm.lstIngredients.toppings[i].selected==true)
        selectedToppings.push[i];
}
var TopsSelect=selectedToppings.join("\n");
return TopsSelect;
}

<select name="lstIngredients" size="9" multiple="multiple">
        <option id="toppings[0]" value="1.00">Sausage</option>
        <option id="toppings[1]" value="1.00">Pepperoni</option>
        <option id="toppings[2]" value="1.00">Extra Cheese</option>
        <option id="toppings[3]" value="1.00">Onions</option>
        <option id="toppings[4]" value="1.00">Black Olives</option>
        <option id="toppings[5]" value="1.00">Anchovies</option>
        <option id="toppings[6]" value="1.00">Pineapple</option>
        <option id="toppings[7]" value="1.00">Canadian Bacon</option>
        <option id="toppings[8]" value="1.00">Ground Beef</option>
    </select>
4

1 回答 1

0

以下代码应该可以解决您的问题。只需将其粘贴到文档的正文中

  1. 首先，您需要将 ToppingsWanted() 函数绑定到列表的 onChange 事件。这样当列表的状态发生变化时，您的函数就会被触发。

  2. 您可以使用 selectedIndex 属性获取选定的元素，而不是遍历列表元素。

  3. 我已将值更改为索引。现在该函数将从您的列表中获取值，该值将是索引 0-8，并将对应的值从您的 toppings 数组推送到您选择的 toppings 数组中。

    <form name="pizzaForm">
    <select name="lstIngredients" size="9" multiple="multiple" onChange="ToppingsWanted()">
        <option id="toppings[0]" value="0">Sausage</option>
        <option id="toppings[1]" value="1">Pepperoni</option>
        <option id="toppings[2]" value="2">Extra Cheese</option>
        <option id="toppings[3]" value="3">Onions</option>
        <option id="toppings[4]" value="4">Black Olives</option>
        <option id="toppings[5]" value="5">Anchovies</option>
        <option id="toppings[6]" value="6">Pineapple</option>
        <option id="toppings[7]" value="7">Canadian Bacon</option>
        <option id="toppings[8]" value="8">Ground Beef</option>
    </select>   
</form>

<script type="text/javascript">

   var selectedToppings = [];

    var toppings = [ "Sausage" , "Pepperoni" , "Extra Cheese" , "Onions" ,"Black Olives" , "Anchovies" , "Pineapple" , "Canadian Bacon" , "Ground Beef" ];

    function ToppingsWanted()
    {

        var ingredients = document.pizzaForm.lstIngredients;

        var chosenOption = ingredients.options[ingredients.selectedIndex];

        selectedToppings.push(toppings[chosenOption.value]);

        alert(selectedToppings);
                        return selectedToppings
    }

</script>

一些笔记。

  1. 这是非常多余的，您可以将存储在 toppings 数组中的值存储在列表选项值本身中。这样，如果浇头发生变化，您就不必更新两件事。

  2. 此代码不能确保浇头不会添加两次。我可以多做一个额外的奶酪披萨。

于 2013-05-18T16:43:03.237 回答