根据4个下拉选项显示具体内容

Question

我已经设法获得一些代码以实现上述目标，但是，尽管进行了多次尝试，但我无法使其工作。任何人都可以请帮助我吗？

JS的HTML文件的HEAD：

<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在HTML文件的BODY：

<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个输入。它看起来很奇怪，没有逗号或单独的''标记，但教程不包括这些，它的工作原理。最后，这里是从我的外部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>