Question

我正在为Google表格中的附件制作侧边栏页面。

用户将从选择菜单中选择一个主题（下拉菜单），然后将更改div的内部html以显示其他帮助主题。

到目前为止，传递的变量是显示的内容。我希望变量的内容显示为html。

我能够通过文本链接来完成这项工作，但是它们在侧边栏中占用了太多空间，所以我进入了选择菜单。

我制作了比实际帮助侧栏更简单的示例，因此查看的代码更少：

<!DOCTYPE html>
<html>
<body>

<p>Select a choice from the list.</p>

<select id="topic" onchange="showContent(this.value)">
  <option value="choice1">This one</option>
  <option value="choice2">the next one</option>
  <option value="choice3">Yet another</option>
</select>

<p>When you select a choice, the output should change based on the value of the variable passed.</p>

<p id="helpContent">Results go here</p>

<script>
//VARS
	var choice1 = '<ul><li>This is the first choice<li></ul>';
	var choice2 = '<ul><li>This is the second choice<li></ul>';
	var choice3 = '<ul><li>This is the, like, third choice<li></ul>';
	
	function showContent(topic) {
  document.getElementById("helpContent").innerHTML = topic;
	}
	
</script>

</body>
</html>

Answer 1

使用数据结构来表示您的元素，然后相应地创建它们

<!DOCTYPE html>
<html>

<body>
  <p>Select a choice from the list.</p>
  <select id="topic" onchange="showContent(this.value)">
  <option value="choice1">This one</option>
  <option value="choice2">the next one</option>
  <option value="choice3">Yet another</option>
</select>

  <p>When you select a choice, the output should change based on the value of the variable passed.</p>

  <p id="helpContent">Results go here</p>

  <script>
    var choices = {
      "choice1": {
        list: ["item1", "item2", "item3"]
      },
      "choice2": {
        list: ["item1"]
      },
      "choice3": {
        list: ["item3"]
      },
    }

    function showContent(topic) {
      var currentChoice = choices[topic];
      if (currentChoice == null)
        return alert("Invalid choice");
      var newList = document.createElement('ul');
      for (var i = 0; i < currentChoice.list.length; i++) {
        var newListItem = document.createElement('li');
        newListItem.innerText = currentChoice.list[i];
        newList.appendChild(newListItem);
      }
      var sidebarContainer = document.getElementById("helpContent");
      sidebarContainer.innerHTML = "";
      sidebarContainer.appendChild(newList);
    }
    window.onload = function() {
      showContent("choice1");
    }
  </script>
</body>

</html>

选择菜单以将变量传递给函数以更改innerhtml

1 个答案: