根据4个下拉菜单显示特定内容

Question

我已经设法获得一些代码来实现上述目的，但是，尽管进行了几次尝试，但仍无法正常工作。 有人可以帮我吗？

HTML文件的HEAD中的JS：

    <script type="text/javascript"> 
        jQuery(function($){

        selects = $('#select-container select'),
        results = $('#results-container > div');

        selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        results.filter(values).show().siblings().hide();
        });

        });
    </script>

HTML文件的BODY中的HTML：

<div class="margins1"><h2>Goal</h2>
    <div id='select-container'>
<select>
<option value='none'>Select Option</option>
    <option value='Fat Loss'>Fat Loss</option>
    <option value='Lean Muscle'>Lean Muscle</option>
    <option value='Size & Mass'>Size & Mass</option>
    </select>
    <h2>Dietary Requirements</h2>
    <select>
    <option value='none'>Select Option</option>
        <option value='No Requirements'>No Requirements</option>
    <option value='Vegetarian'>Vegetarian</option>
    <option value='Vegan'>Vegan</option>
        <option value='Gluten Free'>Gluten Free</option>
            <option value='Gluten Free (vegetarian)'>Gluten Free (vegetarian)</option>
                <option value='Gluten Free'>Gluten Free (vegan)</option>
                    <option value='Dairy Free'>Dairy Free</option>
                        <option value='Dairy Free (vegetarian)'>Dairy Free (vegetarian)</option>
                        <option value='Dairy Free (vegan)'>Dairy Free (vegan)</option>
                        <option value='Nut Free'>Nut Free</option>
                                                <option value='Nut Free (vegetarian)'>Nut Free (vegetarian)</option>
                                                                        <option value='Nut Free (vegan)'>Nut Free (vegan)</option>
                                                                        <option value='Supplement Free'>Supplement Free</option>
                                                                        <option value='Supplement Free (vegetarian)'>Supplement Free (vegetarian)</option>
                                                                        <option value='Supplment Free (vegan)'>Supplement Free (vegan)</option>
                                                                        </select>
                                                                        <h2>Type of Day</h2>
                                                                        <select>
                                                                        <option value='none'>Select Option</option>
        <option value='Non-Back-Load Day (10-Day Prep/CNS)'>Non-Back-Load Day (10-Day Prep/CNS)</option>
    <option value='Back-Load Day (10-Day Prep/CNS)'>Back-Load Day (10-Day Prep/CNS)</option>
    <option value='Non-Back-Load Day (CBL)'>Non-Back-Load Day (CBL)</option>
    <option value='Back-Load Day (CBL)'>Back-Load Day (CBL)</option>
    </select>
    <h2>Cooking Level</h2>
    <select>
    <option value='none'>Select Option</option>
        <option value='Minimal Cooking'>Minimal Cooking</option>
    <option value='Moderate Cooking'>Moderate Cooking</option>
    <option value='Maximum Cooking'>Maximum Cooking</option>
    </select></br>

</div>

以下是HTML代码的其余部分，这些代码将下拉选择的组合分配给一段文本。 我只做一个例子：

    <div class="margins2"><h1>Meal Plan...</h1>
<div id='results-container'>
<div class='Fat Loss No Requirements Back-Load Day (CBL) Moderate Cooking'> IT WORKS</div>
  </div>

第二个div类具有4个输入。 没有逗号或单独的''标记看起来很奇怪，但本教程不包含这些标记，并且可以正常工作。 最后，这是我的EXTERNAL CSS文件中的一些代码：

#results-container > div { display: none; }

谁能帮助我解决不显示文本的问题，或者确定为什么会发生这种情况？ 我想实现的教程的JSFiddle链接可以在这里找到： http : //jsfiddle.net/chnZP/

非常感谢

Answer 1

问题似乎在于如何编写下拉列表中的值。 因为值直接用作类名，所以在选择特殊字符时会受到限制。

在本教程示例之后，如果选择alpha ， blue和dog ，脚本会将其转换为字符串".alpha.blue.dog" ，然后使用.filter()方法选择包含这3个类名称的元素。

由于字符串是发送给jQuery进行管理的，因此必须遵循严格的语法。 这意味着您不能在类名称中使用空格，反斜杠，括号（...等），因为它们的解析方式会有所不同。

稍微编辑代码即可解决。 http://jsfiddle.net/AjdHa/7/

<div id='select-container'>
    <select>
        <option value='none'>Select Option</option>
        <option value='Fat_Loss'>Fat Loss</option>
    </select>
    <h2>Dietary Requirements</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='No_Requirements'>No Requirements</option>
    </select>
    <h2>Type_of_Day</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='Non-Back-Load_Day_CBL'>Non-Back-Load Day (CBL)</option>
    </select>
    <h2>Cooking Level</h2>

    <select>
        <option value='none'>Select Option</option>
        <option value='Minimal_Cooking'>Minimal Cooking</option>
        <option value='Moderate_Cooking'>Moderate Cooking</option>
        <option value='Maximum_Cooking'>Maximum Cooking</option>
    </select>
</div>
<div class="margins2">
    <h1>Meal Plan...</h1>
    <div id='results-container'>
        <div class='Fat_Loss No_Requirements Non-Back-Load_Day_CBL Moderate_Cooking'>
            IT WORKS
        </div>
    </div>
</div>