Javascript 在选择第一个下拉列表后显示第二个下拉列表的内容。

我已设法获得一个下拉列表，以根据选择填充第二个下拉列表

此处为HTML：

    <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="exercise_select">
<option value ="__select__">SELECT</option>
<option value ="chestpress">Chest Press</option>
<option value ="inclinechestpress">Incline Chest Press</option>
</select>


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

<div class="biceps">
<select class="exercise_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>

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

JavaScript在这里：

<Script language='JavaScript'>
$(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
    }
});

    $('.exercise_select').change(function(){
        console.log(123);
        $('.exercise_name').hide();
        var subele=$('.exercise_name');
        subele.filter('.'+$(this).val()).show();
    });
});
</script>

$（文档）.ready（函数（）{
var元素=$（'div.container'）.children（）.hide（）；
$（'#BodyPart'）。更改（函数（）{
元素。隐藏（）；
var值=$（this.val（）；
if（value.length）{//if somethings'selected
elements.filter（'.+value）.show（）；//显示所需的元素
}
});
$（'.exercise_select'）.change（函数（）{
控制台日志（123）；
$（'.exercise_name'）.hide（）；
var subele=$（'.exercise_name'）；
subele.filter（'.+$（this.val（））.show（）；
});
});

如您所见，当选择“胸部”或“二头肌”时，可在第二个下拉列表中选择与该身体部位相关的运动。我想显示特定于第二个选择的信息（正如您所看到的，我使用了大写字母作为虚拟文本的练习标题），但由于某些原因，在选择第二个选项之前，所有内容都会显示

例如，我选择“胸部”，然后在第二个下拉列表中选择两个练习中的任何一个之前，两个虚拟文本都会出现。他们只挑了一次我选择的练习。有没有办法让这些虚拟文本在选择其中一个选项之前保持不可见

非常感谢您的时间。

包括

$（'.exercise_name'）.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
}
    $('.exercise_name').hide();
});

非常感谢您再次光临！这管用！非常感谢！