Javascript 从下拉菜单中选择选项组合以生成结果

我通过从下拉列表中选择一个选项来生成一段文本。可在此处找到用于此操作的Javascript代码：

<script type="text/javascript">
        function ShowDiv() {
            safeToggleFieldDisplay(document.getElementById('one'), 'none');
            safeToggleFieldDisplay(document.getElementById('two'), 'none');
            safeToggleFieldDisplay(document.getElementById('three'), 'none');

            var dropdown = document.getElementById("ContentListBox");
            var index = dropdown.selectedIndex;
            var selectedDIV = dropdown.options[index].value;
            safeToggleFieldDisplay(document.getElementById(selectedDIV), 'flip');
        }

        function safeToggleFieldDisplay(field, sVisibility) {
            try {
                if ((field) && (field.style)) {
                    if (sVisibility == 'flip') {
                        if (field.style.display == 'none') {
                            sVisibility = 'block';
                        }
                        else {
                            sVisibility = 'none';
                        }
                    }
                    field.style.display = sVisibility;
                }
            }
            catch (exception) {
                //no handling - just preventing page explosions
            }
        }

函数ShowDiv（）{
safeToggleFieldDisplay（document.getElementById（'one'），'none'）；
safeToggleFieldDisplay（document.getElementById（'two'），'none'）；
safeToggleFieldDisplay（document.getElementById（'three'），'none'）；
var dropdown=document.getElementById（“ContentListBox”）；
var指数=下拉列表。selectedIndex；
var selectedDIV=下拉列表。选项[index]。值；
safeToggleFieldDisplay（document.getElementById（selectedDIV），“flip”）；
}
功能安全切换字段显示（字段、可视性）{
试一试{
if（（字段）和&（字段样式））{
如果（可视性==‘翻转’）{
如果（field.style.display=='none'）{
可视性='块'；
}
否则{
可视性=‘无’；
}
}
field.style.display=sVisibility；
}
}
捕获（例外）{
//没有处理-只是防止页面爆炸
}
}

下拉列表和示例内容的HTML代码如下所示：

 <select name="ContentListBox" id="ContentListBox" onchange="javascript:ShowDiv();">
                <option value="">Select Macronutrient</option>
                <option value="one">Protein</option>
                <option value="two">Carbohydrates</option>
                <option value="three">Fats</option>
            </select>
            <div id="one" style="display:none;"> <br>
                <img src="Protein.jpg" width="120" height="120" style="position: absolute; bottom: 15px; right: 30px;"/>
<b>About</b> <br>
➢   The most common macronutrient associated with fitness in general. <br>
➢   It repairs the body’s cells.<br>
➢   It forms many body structures, including muscles, skin, and hair.<br>
➢   It maintains and replaces tissues in your body.<br>
➢   It manufactures red blood cells to carry oxygen.<br>
➢   It manufactures antibodies to fight diseases<br>
<b>Examples</b><br>
➢   Lean meat and fish<br>
➢   Eggs and dairy<br>
➢   Beans, nuts, and seeds<br>
➢   Whey, soy, and plant protein supplements<br>

</div>

选择大量营养素
蛋白质
碳水化合物
脂肪


关于

➢   一般来说，最常见的大量营养素与健康有关

➢   它修复人体细胞。

➢   它形成许多身体结构，包括肌肉、皮肤和头发。

➢   它能维持和替代你体内的组织。

➢   它制造红细胞来携带氧气。

➢   它制造抗体来对抗疾病

示例

➢   瘦肉和鱼

➢   鸡蛋和奶制品

➢   豆类、坚果和种子

➢   乳清、大豆和植物蛋白补充剂

我的问题是，我是否可以通过从多个下拉列表中选择选项的组合来输出特定的文本片段。例如，用户可以从以下每个下拉列表中选择一个选项，然后单击“生成”以生成特定于所选选项组合的训练计划：

<div class="margins1">
<h2>Goal</h2>
<select name = "goalDrop"> 
<option>Fat Loss</option>
<option>Lean Muscle</option>
<option>Size & Mass</option>
</select>
<h2>Current Level</h2>
<select name = "levelDrop"> 
<option>Beginner</option>
<option>Intermediate</option>
<option>Advanced</option>
                                                                                    </select>
                                                                                    <h2>Gym Accessibility</h2>                                                                      <select name = "gymDrop"> 
    <option>Access to Gym</option>
    <option>No Access to Gym</option>
    </select>

    <h2>Days Per Week</h2>                                                                      <select name = "weekDrop"> 
    <option>3-Day Split</option>
    <option>4-Day Split</option>
    <option>5-Day Split</option>
    </select></br>
    </div>

    <div id="generateworkoutplan"> 
    <form action=>
    <input type="submit" value="Generate" >
    </form>
    </div>

球门
脂肪损失
瘦肌肉
尺寸和质量
当前水平
新手
中间的
先进的
健身房可达性
进入健身房
不能去健身房
每周天数
三日分割
4天分割
五日分割

我一直在尝试扩展现有的解决方案来实现这一点，但这已经变得相当混乱。谁能告诉我最好的方法是什么/或者提供某种代码结构？请注意，我也在使用phpmyadmin，所以我也欢迎任何包含此功能的解决方案。还请注意，在阅读我的代码片段时，您可能需要一直向右滚动（由于某些原因，它的格式/缩进不正确）

---

非常感谢您的时间。

我将使用与三个下拉列表的串联选择相对应的ID

伪代码：

targetID = selectionA + selectionB + selectionC

因此，如果选择值为“AAB”，则应公开ID为“AAB”的DIV。给它们所有相同的类名，按类名隐藏它们，然后显示与ID对应的类名

<div id="AAB" class="info">...</div>

。。。

BTW：在活动中，您永远不需要“javascript:”。非常感谢您的回复，迪奥德乌斯，但我在这方面运气不太好。“给他们所有相同的类名，按类名隐藏，然后显示与ID对应的类名。”这是什么意思？还有其他人有什么建议吗？