每个选项下拉菜单项显示不同的内容 [英] Display different content per option dropdown item

问题描述

我创建了一个下拉菜单，将要在其中添加一些问题.我还创建了一些div，其中包含对下拉菜单中问题的回答.

I have created a dropdown menu that I am going to put some questions in. I have also created some divs that contain the responses to the questions in the dropdown menu.

我希望在未选择任何选项的情况下隐藏所有答案.当一个选项被选中但我只希望这个问题的答案已经被选中出现的下拉菜单下面这个问题.

I want the answers to all be hidden when an option hasn't been selected. When an option is selected however I want only the answer to that question that has been selected to appear underneath the dropdown menu.

关于如何实现此目标的任何想法吗?

Any ideas as to how I can achieve this?

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

Here is my dropdown list & content:

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

推荐答案

我将重组您的答案类并添加ID.看看这个小提琴: https://jsfiddle.net/c5o5f5d9/1/

I would restructure your answer classes and add ids. Check out this fiddle: https://jsfiddle.net/c5o5f5d9/1/

通过使所有答案div具有相同的类，可以将它们全部隐藏，然后仅通过ID触发所需的答案. id是答案一词及其所指数字的组合.

By making all the answer divs have the same class, you can hide them all, and then only trigger the answer you want by the id. The id is a combination of the word answer and the number it refers to.

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

这篇关于每个选项下拉菜单项显示不同的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！