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

Posted 2023-05-08

【中文标题】每个选项下拉项显示不同的内容

【英文标题】：Display different content per option dropdown item

【发布时间】：2016-02-20 06:17:23

【问题描述】：

我创建了一个下拉菜单，我将在其中放入一些问题。我还创建了一些 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>

【问题讨论】：

How to display content depending on dropdown menue user selection的可能重复

Google "Display different content per option dropdown item"，这个问题的标题自带答案（不包括这个页面）。

【参考方案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');
);

或者那个方向的东西。

【参考方案2】：

我会重组你的答案类并添加 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');
    );
);

【参考方案3】：

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

【参考方案4】：

试试这样的小代码：

https://jsfiddle.net/r4fpz8j8/

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