javascript - 每个选项下拉项显示不同的内容

Question

我创建了一个下拉菜单，我将在其中输入一些问题。我还创建了一些 div，其中包含对下拉菜单中问题的回答。

我希望在未选择选项时隐藏所有答案。但是，当选择一个选项时，我只希望已选择的该问题的答案显示在下拉菜单下方。

关于如何实现这一点有什么想法吗？

这是我的下拉列表和内容:

<select name="questions" id="faq-questions">
    <option>Questions</option>
    <option value="1">Question 1</option>
    <option value="2">Question 2</option>
    <option value="3">Question 3</option>
    <option value="4">Question 4</option>
</select>

<div class="answer-1" hidden>
    <p>Answer 1 content</p>
</div>
<div class="answer-2" hidden>
    <p>Answer 2 content</p>
</div>
<div class="answer-3" hidden>
    <p>Answer 3 content</p>
</div>
<div class="answer-4" hidden>
    <p>Answer 4 content</p>
</div>

Answer 1

<select name="questions" id="faq-questions">
<option>Questions</option>
<option id="option1" value="1">Question 1</option>
<option id="option2" value="2">Question 2</option>
<option id="option3" value="3">Question 3</option>
<option id="option4" value="4">Question 4</option>
</select>

<div class="answer-1" id="answer1" hidden>
    <p>Answer 1 content</p>
</div>
<div class="answer-2" id="answer2" hidden>
    <p>Answer 2 content</p>
</div>
<div class="answer-3" id="answer3" hidden>
    <p>Answer 3 content</p>
</div>
<div class="answer-4" id="answer4" hidden>
    <p>Answer 4 content</p>
</div>

现在一切都有一个唯一的 ID。只要选择了选择按钮，您就可以触发 .show() 或 .fadeIn()。

类似于:

$('#option1').click(function(){
    $('#answer1').fadeIn('slow');
});

或者那个方向的东西。