[英]Display different content per option dropdown item
我创建了一个下拉菜单,将要在其中添加一些问题。我还创建了一些div,这些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');
});
或朝那个方向的东西。
我将重组您的答案类并添加ID。 看看这个小提琴: https : //jsfiddle.net/c5o5f5d9/1/
通过使所有答案div具有相同的类,可以将它们全部隐藏,然后仅通过ID触发所需的答案。 ID是答案一词及其所指数字的组合。
HTML:
<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 hidden" id="answer1">
<p>Answer 1 content</p>
</div>
<div class="answer hidden" id="answer2">
<p>Answer 2 content</p>
</div>
<div class="answer hidden" id="answer3">
<p>Answer 3 content</p>
</div>
<div class="answer hidden" id="answer4">
<p>Answer 4 content</p>
</div>
CSS:
.hidden {
display: none;
}
JS:
$(document).ready(function(){
$('#faq-questions').on('change', function(){
var theVal = $(this).val();
$('.answer').addClass('hidden');
$('.answer#answer' + theVal).removeClass('hidden');
});
});
<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 id="faq-answers">
<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>
</div>
<script>
$(function(){
$('#faq-questions').on('change',function(){
$('#faq-answers div').hide();
$('.answer-'+this.value).show();
});
});
</script>
试试这样的小代码:
https://jsfiddle.net/r4fpz8j8/
$('#faq-questions').change(function(){
var question = $(this).val();
$('.answer').css({display: 'none'});
$('.answer-'+ question).css({display: 'block'});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.