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

时间:2015-11-18 13:26:15

标签: javascript jquery html css drop-down-menu

我创建了一个下拉菜单,我将提出一些问题。我还创建了一些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>

4 个答案:

答案 0 :(得分: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');
});

或朝那个方向发展。

答案 1 :(得分:1)

我会重新构建你的答案类并添加id。看看这个小提琴:https://jsfiddle.net/c5o5f5d9/1/

通过使所有答案div具有相同的类,您可以将它们全部隐藏起来,然后只触发id所需的答案。 id是单词answer和它引用的数字的组合。

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');
    });
});

答案 2 :(得分:0)

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

答案 3 :(得分:0)

尝试类似这样的小代码:

https://jsfiddle.net/r4fpz8j8/

$('#faq-questions').change(function(){
    var question = $(this).val();       
    $('.answer').css({display: 'none'});
    $('.answer-'+ question).css({display: 'block'});
});