2012-09-10 2 views
1

안녕하십니까, 사용자가 옵션을 선택하면 다른 옵션이 표시됩니다. 예, 나는 그것을했지만 사용자가 다른 옵션을 선택하면, 내가 표시 텍스트 싶어하지만 여기에 작동하지 않습니다 내 코드입니다 : 두 번째로 이벤트 핸들러를 추가 할 수 있기 때문에 당신은, jQuery의 on() 기능을 사용할 필요가여러 선택 옵션에 대해 중첩 if를 사용할 수있는 방법은 무엇입니까?

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 

     $(".select-box").change(function() { 
      if ($(".select-box option[value='3']").attr('selected')) { 
      document.getElementById("demo").innerHTML="<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>"; 
      if ($(".select-box option[value='5']").attr('selected')) { 
      document.write("Hello") 
      } 
      } 

     }); 

     }); 
    </script> 
    </head> 
    <body> 
    <select class="select-box"> 
     <option>Select an option</option> 
     <option value="1">no alert</option> 
     <option value="2">no alert too</option> 
     <option value="3">alert</option> 
    </select> 
    <p></br> 
    <div id="demo"></div> 

    </body> 
</html> 
+0

정확히 무엇을 원하니? 언제 당신의 '안녕하세요'서면해야합니까? –

+0

찾고있는 경우와 같이 값 5 인 옵션이 없습니다. –

+0

알림 옵션을 클릭하면 옵션 값 "a"와 "b"가 표시되고 b 옵션을 클릭하면 "Hello"가 표시됩니다 – Teodoris

답변

3

select, 이것은 DOM에 동적으로 추가됩니다.

$(document).ready(function() { 

    $('#main').on('change', '.select-box', function() { 

     if ($(this).val() == 3) { 
      $('#demo').html("<select class='select-box'><option value='4'>a</option><option value='5'>b</option></select>"); 
     } 

     if ($(this).val() == 5) { 
      alert("Hello"); 
     } 
    }); 

});​ 

DEMO을 참조하십시오.

div로 요소를 래핑하고 변경 핸들러를 첨부했습니다.

자바 스크립트 getElementById을 jQuery 선택기로 바꿨다는 점에 유의하십시오. 또한 값 확인을 간소화했습니다.

1

스크립트가 실행 중일 때 DOM 일치 선택기 .select-box에 하나의 요소 만 있기 때문에 작동하지 않습니다. 따라서 두 번째 이벤트를 만든 후에 이벤트 리스너를 한 번 더 바인딩해야합니다.

+1

솔루션의 이론적 부분을 제안했지만 Michal의 대답은 내가 말한대로 사용하십시오. – haynar

관련 문제