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

Question

I've managed to generate a piece of text from selecting an option from a drop-down list. The Javascript code for this can be found here:

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

The HTML code for the drop-down list and example content is as follows:

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

My question is whether I can achieve outputting specific pieces of text with combinations of selected options from more than one drop-down list . For example, the user could select one option from each of the following drop-down lists, and then click a 'Generate' to generate a workout plan specific to the combination of options that they have chosen:

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

I have been trying to extend my existing solution to achieve this, but this has gotten quite messy. Could anyone please advise me on the best way to go about this/or provide some sort of code structure? Please note, I am also using phpmyadmin, so I'd welcome any solutions that incorporate this too. Please also note that you may have to scroll all the way to the right when reading my code snippets (for some reason it is not formatting/indenting correctly).

Many thanks for your time.

Answer 1

I would use IDs that correspond with a concatenated selection of the three drop-downs.

pseudo-code:

targetID = selectionA + selectionB + selectionC

So if you have a selection value of "AAB", you should expose a DIV with an ID of "AAB". Give them all the same class name, hide them by class name, then show the one corresponding with the ID.

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