在第一个下拉菜单被选中后显示第二个下拉菜单的内容. [英] Show content of 2nd Drop down after 1st Drop down getting selected.

问题描述

我已经成功地获得了一个下拉列表，并根据选择填充了第二个下拉列表.

I've managed to get one drop-down list to populate the second drop-down list based on the selection.

此处的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

JavaScript here:

<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>

可以看到，当选择胸部"或二头肌"，相对运动到主体部分变得可用在第二个下拉列表中选择.我想显示特定于第二个选择的信息(如您所见，我已经在大写文本中使用了练习的标题大写)，但是由于某些原因，所有内容都会显示，直到选择了第二个选项.

As you can see, when 'Chest' or 'Biceps' is selected, relative exercises to that body part becomes available to choose in the second drop-down list. I want to display information specific to that second selection (as you can see I've used the exercise's title in capitals for dummy text), but for some reason everything displays UNTIL a second option is selected.

因此，例如，我选择胸"，然后在第二个下拉列表中选择两个练习中的任何一个之前，两个虚拟文本都会出现.他们只有在我选择练习后才会选择.在选择其中一个选项之前，是否有办法让那些伪文本保持不可见?

So for example, I'd choose 'Chest', then before I select any of the two exercises in the second drop-down list, both dummy texts appear. They only single out once I choose the exercise. Is there a way to have those dummy texts remain invisible until one of the options is selected?

非常感谢您的宝贵时间.

Many thanks for your time.

推荐答案

在第一个下拉更改事件中包含$('.exercise_name').hide();

Include $('.exercise_name').hide(); in first dropdown change event

$('#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();
});

演示

这篇关于在第一个下拉菜单被选中后显示第二个下拉菜单的内容.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！