Javascript，selectedIndex 属性返回 [object HTMLSelectElement] + 值

Question

我有简单的代码来获取下拉列表项的value并将其write文档中。

Select a fruit and click the button:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<button type="button" onclick="myFunction()">Display index</button>
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    x += x.options[x.selectedIndex].value;
    document.write("<br / >" + x);
}
</script>

我在这里面临两个问题，一个是结果[object HTMLSelectElement]+value。为什么会这样？

其次，document.write属性会删除所有 body 元素，仅显示其结果。为什么会这样？你能详细解释一下吗？

Answer 1

var x = document.getElementById("mySelect");
    x += x.options[x.selectedIndex].value;
    document.write("<br / >" + x);

您将值附加到x，该值实际上是类型为 HTMLSelectElement 的节点。

相反，它应该是：

var x = document.getElementById("mySelect"),
    selectedValue = x.value;
    document.write("<br / >" + selectedValue);

即使你不需要使用selectedIndex等，如果你只使用document.getElementById("mySelect").value它会给出选定的值。

关于document.write，我建议您参考MDN文档

而不是 document.write，你必须appendChild或innerHTML。

function myFunction() {
 var x = document.getElementById("mySelect"),
selectedValue = x.value;
document.querySelector("#result").innerHTML = selectedValue;
}

<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<div id="result"></div>
<button type="button" onclick="myFunction()">Display index</button>

Answer 2

您将使用+符号附加内容，如下所示：

var x = document.getElementById("mySelect");
x += x.options[x.selectedIndex].value;
document.write("<br / >" + x);

因此，删除+符号，它应该为您提供选定的索引，如：

var x = document.getElementById("mySelect");
var selectedValue = x.options[x.selectedIndex].value;
document.write("<br / >" + x);

其次，您正在使用document.write（），它将字符串写入整个文档，删除整个内容，因此请尝试将内容写入某个div，例如：

var x = document.getElementById("mySelect");
var selectedValue = x.options[x.selectedIndex].value;
document.getElementById("some_div").innerHTML = selectedValue;

其中"some_div"是div标签的id，您可以将其添加到 HTML 内容中

Answer 3

对于您的第一个问题，您正在获取 ID 为"myselect"的 DOM 元素，以设置x：

var x = document.getElementById("mySelect");

然后在此行中，x.options[x.selectedIndex].value计算结果为字符串。通过执行 +=，您将该字符串附加/附加到 x 中包含的值。Javascript 在追加之前会自动将 x 的值转换为字符串，因此您可以获得[object HTMLSelectElement]+value结果。

x += x.options[x.selectedIndex].value;

从本质上讲，你正在做x = [object HTMLSelectElement] + x.options[x.selectedIndex].value如果这样可以更清楚地了解正在发生的事情。

对于第二个问题，document.write(value)用value替换文档中的任何内容。有关更多信息，您可以查看此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/write