Javascript 显示两个下拉列表组合中的特定内容

我试图根据两个下拉列表中的选择显示内容（文本、图像、视频）。事实证明，这相当棘手，因为我的第二个下拉列表会根据第一个列表进行更新。以下是迄今为止我的HTML代码：

<div class="margins1">
<h2>Main Body Part</h2>
<select size="1" id="BodyPart" title="" name="BodyPart">
<option value="">-Select Body Part-</option>
<option value="chest">Chest</option>
<option value="biceps">Biceps</option>
</select>

<div class="container">
<div class="chest">
<select>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>
</div>

<div class="chest chestpress">
CHEST PRESS
</div>
<div class="chest inclinechestpress">
INCLINE CHEST PRESS    
</div>

<div class="biceps">
<select>
<option value="bicepcurls">Bicep Curls</option>
<option value="hammercurls">Hammer Curls</option>
</select>

<div class="bicepcurls">
BICEP CURLS
</div>
<div class="hammercurls">
HAMMER CURLS   
</div>     
</div>
</div>

主体部分
-选择身体部位-
胸部
肱二头肌
胸部按压
斜胸按压
胸部按压
斜胸按压
二头肌卷曲
锤子卷曲
二头肌卷曲
锤子卷曲

以下是我在HTML上方的JavaScript：

   <script> 
    $(document).ready(function() {
        $('#BodyPart').bind('change', function() {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
        });
        </script>

$（文档）.ready（函数（）{
$（'#BodyPart'）.bind（'change'，function（）{
var elements=$（'div.container'）.children（）.hide（）；//隐藏所有元素
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
}).触发（“变更”）；
});

如您所见，如果用户单击“胸部”，他们将看到另一个下拉菜单，其中包含两个胸部练习。同样的逻辑用于“二头肌”。但是，如果用户单击身体部位类别的特定练习，我尝试显示一段文本（练习名称）。问题是，无论用户选择了什么练习，这两段文本都会显示出来

例如，如果用户选择身体部位“肱二头肌”，则无论在第二个下拉菜单中选择什么运动，“肱二头肌卷曲”和“锤子卷曲”文本都将显示。是否有人能够提供一些帮助或指导，我可以如何使这项工作

非常感谢您的时间和支持。

您的HTML：

<div class="margins1">
<h2>Main Body Part</h2>
<select size="1" id="BodyPart" title="" name="BodyPart">
<option value="">-Select Body Part-</option>
<option value="chest">Chest</option>
<option value="biceps">Biceps</option>
</select>

<div class="container">
<div class="chest">
<select class="excercise_select">
<option value ="__select__">SELECT</option>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>
</div>
<div class="chest">
<div class="chestpress exercise_name">
CHEST PRESS
</div>
<div class="inclinechestpress exercise_name">
INCLINE CHEST PRESS    
</div>
</div>

<div class="biceps">
<select class="excercise_select">
<option value ="__select__">SELECT</option>
<option value="bicepcurls">Bicep Curls</option>
<option value="hammercurls">Hammer Curls</option>
</select>
<div class="biceps">
<div class="bicepcurls exercise_name">
BICEP CURLS
</div>
<div class="hammercurls exercise_name">
HAMMER CURLS   
</div>
</div>
</div>

---

添加单独的脚本，用于选择与您已有的类似的练习written@Tyranicangel我已经完成了，在上面的HTML中？您已经编写了用于选择身体部位的脚本。之后，您必须将类似的脚本附加到显示身体部位列表的其他两个select元素exercises@Tyranicangel我在这方面运气不太好。你能告诉我你的意思吗？对于给您带来的不便深表歉意。我们将尝试一下并让您知道，非常感谢！不幸的是，这似乎不起作用。它生成的结果与我的脚本相同（当只有1个应该显示时，会显示2个练习名）。我在脚本中错写了类名！但出于某种原因，它对胸部不起作用，只有二头肌？我已经仔细查看了一遍，但无法确定原因…检查html代码中的类和ID错误。对我来说，它工作得很好

$(document).ready(function() {
        var elements = $('div.container').children().hide();
        $('#BodyPart').change(function() {
            elements.hide();
            var value = $(this).val();
            if (value.length) { // if somethings' selected
                elements.filter('.' + value).show(); // show the ones we want
            }
        });

        $('.excercise_select').change(function(){
            console.log(123);
            $('.exercise_name').hide();
            var subele=$('.exercise_name');
            subele.filter('.'+$(this).val()).show();
        });
   });