0

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

4

3 回答 3

2

您可以在 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>
于 2013-05-21T19:29:41.587 回答
0

您的问题很可能出现，因为您尝试在 head 中访问的对象尚未加载。尝试将您的 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>
于 2013-05-21T19:21:40.273 回答
0

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 */
}

现在，如您所见，这确实很笨重（但可靠）。存在试图做得更好的框架。值得看看那些。

于 2013-05-21T19:20:44.573 回答