在JavaScript中调用组合框值

Question

如何将选定的组合框项目用作使用javascript图像调用的变量？

HTML

<select id="fileType">
 <option value=".jpg">.JPG</option>
 <option value=".png">.PNG</option>
 <option value=".gif">.GIF</option>
</select>

的JavaScript

var selectedComb = document.getElementById("fileType");
var selectedFileType = selectedComb.options[selectedComb.selectedIndex];
var selectedType = selectedFileType.value;

document.write('<img src="example.com/images/pic + 'selectedType'"/>');

现在，显然这不起作用。我怎样才能使它工作？它实际上只是需要修复的document.write行。

Answer 1

您应该使用document.write()在加载文档时动态插入内容。

根据MDN's doc：

  

写入已加载但未调用document.open()的文档会自动执行document.open()来电

来自document.open()：

  

如果目标中存在文档，则此方法将其清除

因此，在加载文档后使用document.write()将覆盖（或清除）您的文档。出于这些原因，using document.write() is considered a bad practice。

使用

document.body.innerHTML+= '<img src="example.com/images/pic' +selectedType+ '"/>';

将改为解决问题。

另见What are alternatives to document.write?