加载本地JSON的Select组件首个选项无法直接选中的技术问题

• 页面中的select元素（书籍选择器）首个选项无法直接选中，必须先选择其他选项后，第一个选项才能正常触发选中逻辑。
• 该选择器从本地项目文件夹加载.json文件，将数据存储在Books数组中（示例格式：[{"filename": "Genesis.json", "title": "Genesis"}]）。
• 通过for循环已成功生成第0索引的选项，但直接点击该选项无响应。

相关代码如下：

/**
 * List of books in an array and its order
 * @typedef {{
 *   book: string,
 *   chapters: {
 *     chapter: string,
 *     verses: {
 *       verse: string,
 *       text: string,
 *     }[],
 *   }[],
 * }} Book
 *
 * Loads a book based on its filename (e.g. "Luke.json")
 * @param {string} filename The book filename
 * @returns {Promise<Book>} The book that was read from JSON
 */

bookSelector.onchange = () => {
  const filename = bookSelector.value;
  selectBookByFileName(filename);
};

chapterSelector.onchange = () => {
  const container0 = document.getElementById("verseContainer0");
  const container1 = document.getElementById("verseContainer1");

  if (currentBook == null) {
    return;
  }

  container0.innerText = "";
  container1.innerText = "";

  const chapter = currentBook.chapters[chapterSelector.value];
  const verses = chapter.verses;

  function createElementForVerse(verse) {
    const superscript = document.createElement("sup");
    const textElem = document.createElement("span");

    superscript.innerText = verse.verse;
    textElem.appendChild(superscript);
    superscript.classList.add("mr-1");

    textElem.classList.add("p-1");
    textElem.appendChild(document.createTextNode(verse.text));

    return textElem;
  }

  for (const verse of verses) {
    // Append to both containers
    container0.appendChild(createElementForVerse(verse));
    container1.appendChild(createElementForVerse(verse));
  }

  document.getElementById("verseBtn").addEventListener("click", () => {
    container0.classList.toggle("grid");
    container1.classList.toggle("grid");
  });
};

1. 修复书籍选择器的初始状态与事件触发问题 #

onchange事件仅当选择器的value发生变化时才会触发。页面加载完成后，第一个选项虽然显示在选择器中，但可能存在两个问题：

• 选择器的value未同步设置为第一个选项的值，导致点击它时value无变化，事件不触发；
• 第一个选项未标记为selected，浏览器默认未选中该选项。

解决步骤：

• 在填充完bookSelector的选项后，手动设置初始选中状态并触发初始化逻辑：

  // 假设Books数组已加载完成，填充选项的代码之后添加
  if (Books.length > 0) {
    bookSelector.value = Books[0].filename;
    // 主动调用一次加载逻辑，初始化第一个书籍的内容
    selectBookByFileName(Books[0].filename);
  }
  

• 填充选项时，给第一个<option>标签添加selected属性，确保浏览器默认选中它：

  // 示例填充代码
  for (let i = 0; i < Books.length; i++) {
    const option = document.createElement('option');
    option.value = Books[i].filename;
    option.textContent = Books[i].title;
    if (i === 0) {
      option.selected = true;
    }
    bookSelector.appendChild(option);
  }
  

2. 检查选项的value有效性 #

确保每个选项的value都正确设置为对应书籍的filename，且没有重复或空值——如果第一个选项的value为空，点击时不会触发onchange事件。

3. 修复章节选择器中的事件重复绑定问题 #

当前代码在chapterSelector.onchange中每次都给verseBtn绑定新的点击事件，会导致按钮被点击时多次触发toggle逻辑。需要将事件绑定移到onchange外部，只执行一次：

// 移到chapterSelector.onchange外面
document.getElementById("verseBtn").addEventListener("click", () => {
  const container0 = document.getElementById("verseContainer0");
  const container1 = document.getElementById("verseContainer1");
  container0.classList.toggle("grid");
  container1.classList.toggle("grid");
});

chapterSelector.onchange = () => {
  // 原有的章节加载逻辑...
};

内容的提问来源于stack exchange，提问作者Omar M