如何创建显示文本信息的下拉框？

Question

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

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

如何使其保持在同一页面并且不会完全加载新的html页面？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.answers {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;