첫 번째 드롭 다운이 선택된 후 두 번째 드롭 다운의 컨텐츠 표시.

Question

나는 선택에 따라 두 번째 드롭 다운 목록을 채우는 드롭 다운 목록 하나를 얻을 수있었습니다. 여기

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> 

자바 스크립트 : '가슴'또는 '알통'을 선택

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

당신이 볼 수 있듯이, 그 부위에 비해 운동을 선택 가능하게 두 번째 드롭 다운 목록에서 두 번째 선택 항목에 대한 정보를 표시하고 싶습니다. (더미 텍스트에 대문자로 연습 제목을 사용했음을 알 수 있듯이) 어떤 이유로 두 번째 옵션이 선택 될 때까지 모든 내용이 표시됩니다.

예를 들어 '가슴'을 선택하면 두 번째 드롭 다운 목록에서 두 가지 연습 중 하나를 선택하기 전에 두 개의 유사 텍스트가 나타납니다. 일단 운동을 선택하면 그들은 단 하나 밖에 없습니다. 옵션 중 하나가 선택 될 때까지 그 더미 텍스트를 보이지 않게 유지하는 방법이 있습니까?

시간을 내 주셔서 감사합니다.

Answer 1

는

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

Demo