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 docs

您必须使用appendChild或innerHTML。

，而不是document.write

＆＃13;

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

＆＃13;

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

＆＃13;

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;

其中＆＃34; some_div ＆＃34;是id标记的div，您可以在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

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

3 个答案: