如何创建显示文本信息的下拉框？ [复制]

【问题标题】：How to create dropdown box that displays text information? [duplicate]如何创建显示文本信息的下拉框？ [复制]
【发布时间】：2017-02-02 00:17:45
【问题描述】：

我正在创建一个常见问题解答页面，我希望有一个包含所有常见问题的下拉列表，并且在按下它们时会显示不同的答案。这是我想要的一个例子：

当用户从 1 中选择一个问题时，他们会在区域 2 中显示该问题的答案。

我如何做到这一点，以便它保持在同一页面上并且不会完全加载新的 html 页面？

【问题讨论】：

我觉得奇怪的是，在您 2013 年的最后一个答案stackoverflow.com/q/19164610 之后，所有带有解决方案的答案都不再被接受。那么，发生了什么？
别说这个问题和你前几天问的问题没有什么不同，因为缺乏细节而被关闭stackoverflow.com/questions/41667492/…这不是代码编写或教程服务
使用 AJAX 可以帮助您动态加载内容而无需重新加载。这个Old Post 可以帮助您满足您的需求。

标签： php jquery html css ajax

【解决方案1】：

默认隐藏您的答案。将选择选项的值与各个答案的 ID 匹配。监视 select 的 change 事件，并在 change 上显示与所选选项值关联的 ID。

$('select').on('change',function() {
  var answer = $(this).val();
  $('.answers').hide();
  $('#'+answer).show();
})

.answers {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option disabled selected>choose</option>
  <option value="answer1">answer1</option>
  <option value="answer2">answer2</option>
  <option value="answer3">answer3</option>
</select>

<div class="answers" id="answer1">
  answer1
</div>
<div class="answers" id="answer2">
  answer2
</div>
<div class="answers" id="answer3">
  answer3
</div>

【讨论】：