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

Selecting a combination of options from drop-down menus to generate a result

本文关键字:结果 组合 选项 下拉菜单 选择      更新时间:2023-09-26

我已经通过从下拉列表中选择一个选项生成了一段文本。这方面的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
            }
        }

下拉列表和示例内容的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>

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

非常感谢您抽出时间。

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

伪代码:

targetID = selectionA + selectionB + selectionC

因此,如果您的选择值为"AAB",那么您应该公开一个ID为"AAB"的DIV。给它们提供相同的类名,按类名隐藏它们,然后显示与ID对应的那个。

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