이전 드롭 다운 선택에 따라 두 번째 드롭 다운 표시

저는 html/javascript에 익숙하지 않고 코드를 this link에서 사용하는 방법을 알아 내려고하고 있습니다. 내가 솔루션을 볼 수 있습니다이전 드롭 다운 선택에 따라 두 번째 드롭 다운 표시

는 아래 링크에서 제시 아닌 HTML 페이지의 컨텍스트에 적용하는 방법을 잘 : 나는 HTML 페이지 내에서 HTML과 자바 스크립트 함수의 내용을 복사 한 http://jsfiddle.net/3UWk2/3/

하지만, 기본적으로 모든 라인과 선택 상자를 표시합니다. HTML 코드와 JavaScript 함수가 다른 파일에 별도의 html 페이지가 있어야하며 어떻게 든 2를 함께 호출해야합니까?

<select size="1" id="Rank" title="" name="Rank"> 
    <option value="">-Select Your Rank-</option> 
    <option value="airman">Airman</option> 
    <option value="senior-airman">Senior Airman</option> 
</select> 

<div class="container"> 
    <div class="airman"> 
     <select class="second-level-select"> 
      <option value="">-Select Your Rank-</option> 
      <option value="basic-ore-1">Basic Ore Miner - Level 1</option> 
      <option value="basic-ore-2">Basic Ore Miner - Level 2</option> 
     </select> 
    </div> 
    <div class="senior-airman"> 
     <select class="second-level-select"> 
      <option value="">-Select Your Rank-</option> 
      <option value="omber-miner-1">Omber Miner - Level 1</option> 
      <option value="omber-miner-2">Omber Miner - Level 2</option> 
     </select> 
    </div> 
</div> 

<div class="second-level-container"> 
    <div class="basic-ore-1"> 
     Line of text for basic ore miner 1 
    </div> 
    <div class="basic-ore-2"> 
     Line of text for basic ore miner 2 
    </div> 
    <div class="omber-miner-1"> 
     Line of text for omber miner 1 
    </div> 
    <div class="omber-miner-2"> 
     Line of text for omber miner 2 
    </div>  
</div> 

$(document).ready(function() { 
    $('#Rank').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'); 

    $('.second-level-select').bind('change', function() { 
     var elements = $('div.second-level-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'); 
});

출처

2014-05-21 user3652574

당신은 당신에게 스크립트에 포함해야 페이지처럼 될 것입니다 :

<html > 
<head > 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#Rank').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'); 

$('.second-level-select').bind('change', function() { 
    var elements = $('div.second-level-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> 
</head> 

<body> 
    <select size="1" id="Rank" title="" name="Rank"> 
     <option value="">-Select Your Rank-</option> 
     <option value="airman">Airman</option> 
     <option value="senior-airman">Senior Airman</option> 
    </select> 

    <div class="container"> 
     <div class="airman"> 
      <select class="second-level-select"> 
       <option value="">-Select Your Rank-</option> 
       <option value="basic-ore-1">Basic Ore Miner - Level 1</option> 
       <option value="basic-ore-2">Basic Ore Miner - Level 2</option> 
      </select> 
     </div> 
     <div class="senior-airman"> 
      <select class="second-level-select"> 
       <option value="">-Select Your Rank-</option> 
       <option value="omber-miner-1">Omber Miner - Level 1</option> 
       <option value="omber-miner-2">Omber Miner - Level 2</option> 
      </select> 
     </div> 
    </div> 

    <div class="second-level-container"> 
     <div class="basic-ore-1"> 
      Line of text for basic ore miner 1 
     </div> 
     <div class="basic-ore-2"> 
      Line of text for basic ore miner 2 
     </div> 
     <div class="omber-miner-1"> 
      Line of text for omber miner 1 
     </div> 
     <div class="omber-miner-2"> 
      Line of text for omber miner 2 
     </div>  
    </div> 
</body> 
</html>

출처

2014-05-21 11:22:02 deadulya

가 HI ... 나는 위의 시도와 HTML 페이지에 코드를 복사,하지만 작동하지 않는했다. .. 나는 여전히 모든 라인과 필터링이 작동하지 않는 것을 보았습니다. ( – user3652574

@ user3652574 http://ajax.googleapis.com에 //ajax.googleapis.com 변경 – deadulya

안녕하세요 ... 아래 링크가 작동하는 것 같습니다. "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" – user3652574

이전 드롭 다운 선택에 따라 두 번째 드롭 다운 표시

답변

관련 문제