Question

作为序言，除了基本的HTML之外，我是一个完全的新手，所以我感谢我能得到的任何帮助（如果可能的话，用“傻瓜”级别的解释），如果我错过某种基本的话，我道歉我的问题中的规则或理解。

我希望在下拉菜单中的每个选项（大约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

使用jQuery可以更轻松地完成这项工作，但使用纯Javascript可以实现这一目标！

function displayStuff() {
    var e = document.getElementById('selecter');
    var val = e.options[e.selectedIndex].value;

    switch (val) {
        case "1":
            document.getElementById('one').style.display = 'block';
            break;
        case "2":
            document.getElementById('two').style.display = 'block';
            break;
    }
    
}

.hidden {
    display: none;
}

<select id="selecter" onchange="displayStuff()">
    <option selected>Select One</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<div class="hidden" id="one">Hidden ONE text.</div>
<div class="hidden" id="two">Hidden TWO text.</div>

修改

这是一个简单的AJAX调用，根据下拉列表中的选定值加载文件。然后，它会将div innerHTML替换为responseText。

function displayStuff() {

  var e = document.getElementById('selecter');
  var val = e.options[e.selectedIndex].value;
  var xmlhttp;

  if ( window.XMLHttpRequest ) {
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

   switch (val) {
     case "1":
       xmlhttp.open("GET", "page1.html", false);
       xmlhttp.send();
       break;
   }

  document.getElementById("hider").innerHTML = xmlhttp.responseText;


}

Answer 2

理想情况下，您应该根据使用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;
   });
}

你明白了。

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

2 个答案:

修改