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

如果您可以将数组格式化为多维数组，就像这样

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

然后，如果你致电setArray["book1"]["chap1"]将获得该内容

，则很容易解析数组

Answer 2

正如已经建议的那样，你应该认真考虑使用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这样的库，它可以让生活更轻松，并且可以清理很多。

Answer 3

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

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

3 个答案: