Question

我本质上是在尝试填写表格。然后，当您提交时，它只会打印出value从下拉菜单中选择的内容。但是我得到的只是undefined undefined

<form action="items" method="get">
Fruits
<select name="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select name="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementsByName('fruits').value + " " + 
        document.getElementsByName('vegs').value;
    }
</script>

如果您在All Fruits部分中选择fruits，并在Peas部分中选择vegs，则它应打印all-fruits peas

Answer 1

按名称获取元素时，它返回节点数组。因此，您只需要将document.getElementsByName('fruits')更改为document.getElementsByName('fruits')[0]，将document.getElementsByName('vegs')更改为document.getElementsByName('vegs')[0]。

因此您的代码将如下所示：

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementsByName('fruits')[0].value + " " + 
        document.getElementsByName('vegs')[0].value;
    }
</script>

Answer 2

您的问题是document.getElementsByName返回了node-list集合。这意味着您可能在此集合中有多个从HTML检索的元素，因为它们都具有相同的name。因此，如果只希望从该集合中获取一个元素，则需要使用索引0来定位该元素。

请参见下面的工作示例：

<form action="items" method="get">
Fruits
<select name="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select name="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        let selectedFruit = document.getElementsByName('fruits')[0].value;
        let selectedVeg = document.getElementsByName('vegs')[0].value;
        
        if(selectedVeg == "peas") {
          selectedVeg = "Peas!!!";
        }
        
        document.getElementById("result").innerHTML = selectedFruit + " " +selectedVeg;
        
    }
</script>

编辑：如果您查看上面的摘录，您将看到我已将两个选择的选项存储在它们自己的变量中。然后，您可以使用if语句检查变量是否等于特定的字符串（例如：peas），然后相应地更改变量，以更新输出的文本。

对此的另一种解决方案是给您的select元素一个id。由于id对于每个元素都必须是唯一的，因此您可以使用document.getElementById来获取一个元素而不是元素的集合：

<form action="items" method="get">
Fruits
<select id="fruits">
    <option value="apple">Apple</option>
    <option value="mango">Mango</option>
    <option value="all-fruits">All Fruits</option>
</select>

<br/>

Vegs:
<select id="vegs">
    <option value="carrots">Carrots</option>
    <option value="peas">Peas</option>
    <option value="Lettuce">Lettuce</option>
</select>
<br>
<input type="button" value="Submit" onClick="show_selection()"><br>
Your Selection: <span id="result"></span>

<script>
    function show_selection() {
        document.getElementById("result").innerHTML = document.getElementById('fruits').value + " " + 
        document.getElementById('vegs').value;
    }
</script>

提交表单时出现未定义的错误

2 个答案: