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个输入。没有逗号或单独的“＃39;标记，但教程不包括这些，它的工作原理。最后，这是我的EXTERNAL CSS文件中的一些代码：

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

任何人都可以帮助我解决没有文字显示的问题或找出原因吗？我想要实现的教程的JSFiddle链接可以在这里找到：http://jsfiddle.net/chnZP/

非常感谢

Answer 1

问题似乎在于如何编写下拉列表中的值。由于值直接用作类名，因此您可以选择特殊字符。

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

因为字符串被发送到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>

根据4个下拉选项显示特定内容

1 个答案: