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

我基本上是一个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>

var setArray=newArray(
BK1001，“这是我的章节内容，
BK1002，“这是我的章节内容，
BK1003，“这是我的章节内容，
BK2001，“这是我的章节内容，
BK2002，“这是我的章节内容”
等
);
选书
第一册
第二册
第三册
选择章节
1.
2.
3.
看法
我希望所选书籍和章节的js数组中的内容可以放在这里，而无需重新加载页面。

---

注意：我简化了代码，使其更易于理解。我确信我的js数组不正确，需要修复。另外，我不想刷新页面，只想更新div。感谢您的帮助。

如果这是一个大型网站，您需要学习如何使用jQuery和Ajax（不要刷新所有元素）。有多少本书？如果你能像这样将数组格式化成多维数组，那么第几章呢

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

---

然后很容易解析数组，如果你调用“代码> SETALLATE [BoG1 ] [[CHAP1 ] 将得到

< P>的内容，正如你所建议的，你应该认真考虑使用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这样的库，它会让你的生活变得更轻松，并且会清理很多内容。

试试ajax！！！！！！！！！！！！！！！！！！！！！1理想情况下，您需要一个更好的结构阵列。例如，一个对象数组，其中每个对象都有一个book、chapter和comment属性。然后可以在事件上搜索数组。当然，无论如何，整个“硬编码”选项都是个坏主意。您可以使用Ajax查询服务器并查找数据库（例如），您应该考虑使用Ajax库。我建议您使用jQuery，它还有很多其他方便的功能。这是一个答案吗…？请发表评论。好的，谢谢。如何从表单中选择并从数组的“内容”中填充div？使用onchange事件监听器for select box，当select box更改时，它将调用函数，在那里您可以捕获select box的值，使用该select box值您可以获得content检查此答案非常感谢…它真的很有帮助。在你的数组中，我有点困惑章节号在哪里。似乎“第1章内容”只是内容…从表单中调用的数组中的001、002、003等在哪里？再次感谢。哦，我明白了。。。您依赖于数组的索引，并将使用select的索引（而不是值），对吗？实际上，我使用jquery来管理近70本书和近2000个章节。我使用它链接两个选择，以便章节选择仅显示已选择书籍的选项。我想，顺便说一下，这干扰了按钮。当我对按钮执行onclick命令时，内容将在div中短暂显示，然后消失。不知道为什么，也许jquery插件把事情搞砸了？