我创建了一个下拉菜单,我将在其中输入一些问题。我还创建了一些 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>
最佳答案
<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');
});
或者那个方向的东西。
关于javascript - 每个选项下拉项显示不同的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33781301/