以html形式从js数组动态填充div

Question

我基本上是 javascript 的新手。当用户选择他想要查看的书和章节并按下提交按钮时，我想从同一页面上的选择表单中填充我的网页中的 div。代码如下：

<script type="text/javascript" charset="utf-8">
          var setArray = newArray(
                 bk1, 001, "this is my chapter content for the <div>",
                 bk1, 002, "this is my chapter content for the <div>",
                 bk1, 003, "this is my chapter content for the <div>",
                 bk2, 001, "this is my chapter content for the <div>",
                 bk2, 002, "this is my chapter content for the <div>"
                 etc....
          );
</script>

<form>
<select id="book">
  <option value="">Select Book</option>
  <option value="bk1">Book 1</option>
  <option value="bk2">Book 2</option>
  <option value="bk3">Book 3</option>
</select>
<select id="chapter">
  <option value="">Select Chapter</option>
  <option value="001">1</option>
  <option value="002">2</option>
  <option value="003">3</option>
</select>
<button id="button" type="submit">View</button>
</form>

<div id="content">
I want the content from the js array for the selected book and chapter to be placed here without reloading the page.
</div>

注意：我已简化代码以使其更易于理解。我确定我的 js 数组不正确，需要为我的目的进行修复。另外，我不希望页面刷新，只更新 div。感谢您的帮助。

Answer 1

如果这是一个大型网站，您需要学习如何使用 jQuery 和 Ajax（不刷新所有元素）。几本书？和章节？

Answer 2

如果你可以像这样将你的数组格式化成多维数组

   var setArray = ["book1":["chap1":"content","chap2":"content"], "book2":["chap1":"content","chap2":"content"]]

那么很容易解析数组，如果你调用setArray["book1"]["chap1"]就会得到那个内容

Answer 3

正如建议的那样，您应该认真考虑使用 ajax 来检索这些数据，它不会使页面刷新，并且允许您将这些数据保持为半私密，并且在后端更易于管理。

如果/当您使用 ajax 执行此操作时，您仍然需要以下内容：

var booksData = {
    book1: [
        "chapter 1 content",
        "chapter 2 content",
        "..."
    ],
    book2: [
        "chapter 1 content",
        "chapter 2 content",
        "..."
    ]
}

function whenButtonClicked() {
    var book = "book1" // get the actual book name from the select input
    var chapter = 0 // get the selectedIndex of chapter input
    var content = booksData[book][chapter];
    var div = document.getElementById("content");
    div.innerHTML = content;
}

并在按钮上使用 onclick 处理程序。类似的东西

<button id="button" onclick="whenButtonClicked()">

我建议查看像 jQuery 这样的库，它可以让生活更轻松，并清理很多内容。