динамически заполнить div из массива js в виде HTML

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 (чтобы не обновлять все элементы). Сколько книг ? и главы?