javascript - 尝试根据下拉选择显示大量文本

Question

作为序言，除了基本的 HTML 之外，我是一个完全的新手，所以我很感激我能得到的任何帮助(如果可能的话，用“for dummies”级别的解释)，如果我遗漏了一些基本知识，我深表歉意我的问题中的规则或理解。

我希望下拉菜单(大约 40 个选项)中的每个选项都显示一组文本(每个选项都不同)。每组文本都是多个段落，理想情况下还包含格式(项目符号列表等)。如果人为可能的话，我希望避免每次选择新选择时都必须重新加载页面。另一个挑战是，我认为没有任何实用的方法可以直接在代码中包含所有文本，这意味着我需要找到一种从外部源加载的方法。

我试过使用这段代码(在网站的其他地方找到):

<script type="text/javascript">

    var textBlocks = new Array( 
        'Text block one', 
        'Text block two', 
        'Text block three');

    function changeText(elemid) { 
        var ind = document.getElementById(elemid).selectedIndex; 
        document.getElementById("display").innerHTML=textBlocks[ind]; 
    } 
</script>

<form> 
    <select id="whatever" onChange="changeText('whatever');"> 
        <option value="0">Select</option> 
        <option value="1">One</option> 
        <option value="2">Two</option> 
    </select><br> 
</form> 

尝试并能够在数组中包含文本文件或任何其他内容。 (我知道有一种方法可以通过 PHP 加载文本文件，但不知道我是否可以以某种方式将其包含在数组中。)

对于上述代码或全新建议，我将不胜感激。

Answer 1

理想情况下，您应该使用 ajax 基于某种 Id 从服务器加载数据。 但是，如果您想对其进行硬编码，您可以执行以下操作(非常简单):

var data = {
    0: "Large Amount of text",
    1: "Some more text",
    2: "You get the drill ..."
};

function changeText(id) {
    document.getElementById("content").innerHTML = data[id];
}

<select id="whatever" onchange="changeText(this.value);">
    <option value="0">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<div id="content"></div>

在其他情况下，您执行 ajax 调用(伪代码，因为我不够硬核，无法在没有 jquery 的情况下执行 ajax):

function changeText(id) {
   showAFancyAjaxLoader();

   fetchContentFromServer(id).done(function(response) { 
      hideFancyAjaxLoader();
      document.getElementById("content").innerHTML = response;
   });
}

你明白了。