Question

我是JavaScript的新手，我已经搜索了这个网站和其他网站几个小时的解决方案，但无法让这个工作。我可能在这里犯了一个基本错误。

如果我像这样调用innerHTML inline，那就完美了：

<select id="myselect" onchange="this.innerHTML = '<option value="1">1</option><option value="100">100</option>'"></select>

但是如果我尝试从外部JavaScript文件或HEAD调用它，它就不起作用：

<script type="text/javascript">
function addSomeOptions(obj) {
    obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>

<select id="myselect" onchange="addSomeOptions(this)"></select>

我真的想在外部文件而不是内联中添加javascript，因为可能有数百个选项。我也意识到有用于添加Option标签的JS函数，但由于生成选项的方式，我认为在这种情况下最好使用innerHTML函数。

Answer 1

您可以在html页面中尝试以下代码，

    <script type="text/javascript">
    function addSomeOptions(obj) {
        obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
    }
    </script>
    <select id="myselect" onchange="addSomeOptions(this)">
          <option>TestFirstValue</option>
          <option>TestSecondValue</option>
    </select>

Answer 2

innerHTML是添加动态HTML的非常粗糙的工具。

DOM API为动态修改HTML提供了更加可靠的界面。

你的例子：

function addSomeOptions(obj) {
    var option = document.createElement("option");
    option.setAttribute("value", 1);
    option.appendChild(document.createTextNode("1"));
    obj.appendChild(option);
    /* repeat for all options */
}

现在，正如你所看到的，这真的很笨重（但可靠）。存在试图做得更好的框架。值得一看的是那些。

Answer 3

您的问题很可能出现，因为您尝试在头部访问的对象尚未加载。尝试将你的js调用包装在onload中，如下所示：

window.onload = function () {
   function addSomeOptions(obj) {
        obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
    }
}

如果您在创建对象之前尝试访问它，它将无法工作。您需要在页面加载后执行此操作（请参阅上面的代码），或者，如果您喜欢脚本标记，请将代码放在脚本标记之后 div / input /的html声明中。

编辑：正如Frits指出的那样，你正在对onchange事件进行调用，所以没关系。但是，查看代码时，您需要在select标记中包含一些选项才能触发它：下面的代码对我来说很合适：

<html>
<head>

</head>
<body>
<script type="text/javascript">
function addSomeOptions(obj) {
    obj.innerHTML = '<option value="1">1</option><option value="100">100</option>'
}
</script>

<select id="myselect" onchange="addSomeOptions(this)">
    <option value="1">2</option><option value="100">200</option>
</select>
</body>
</html>

基本的JS - innerHTML只能在线工作

3 个答案: