Javascript 基本JS-仅内联工作的innerHTML

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

如果我像这样调用innerHTML内联，它可以完美地工作：

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

函数addSomeOptions（obj）{
obj.innerHTML='1100'
}

---

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

innerHTML

是添加动态HTML的一个非常粗糙的工具

domapi为动态修改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 */
}

---

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

您的问题很可能出现，因为您试图在head中访问的对象尚未加载。尝试将js调用封装在

onload

中，如下所示：

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

---

您可以在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>

函数addSomeOptions（obj）{
obj.innerHTML='1100'
}
TestFirstValue
TestSecondValue

你说的“不起作用”是什么意思？您在控制台中看到任何错误吗？由于菜单中没有任何内容，您如何从中选择一些内容来触发

change

事件？原始版本似乎“起作用”的原因是您没有在

onchange

属性中转义您的引号。因此，选项100最终成为HTML的一部分，而不是属性的一部分。@Barmar关于为什么我认为它是内联工作的，您是对的（它不是）。我发现是页面上的另一个脚本导致了所有的问题，现在我使用发布的解决方案组合让它工作起来。谢谢大家！他将其称为

onchange

，因此必须加载它。另外，在onload回调中包装该函数声明会使其在全局范围中不可用。哦，我没有注意到。。hmmIf如果您添加了大量内容，则速度明显较慢。HTML解析器比调用许多JS函数更快。

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