2012-07-04 2 views
0

window.onchange 이벤트를 사용하여 chrome 및 FF에서 잘 작동하는 선택 드롭 다운의 조합에 따라 다른 메시지를 표시하거나 숨기는 기능을 만들었습니다. 누구나 이것이 왜 작동하지 않는지 나에게 해결책이 있는지 말해 줄 수 있습니까?window.onchange = function() 이벤트

내부 제한으로 인해 테이블에 내장되어야했습니다.

;(function(){ 
    document.onchange = function(){ 
     // Initialise variables for drop down options 
     var homeMove  = document.getElementById('homeMove'), 
      transferOrder = document.getElementById('transferOrder'), 
      orderComplete = document.getElementById('orderComplete'), 
      submitBtn  = document.getElementById('submitBtn'); 

     // Initialise variables for comments 
     var comment1 = document.getElementById('comment1'), 
      comment2 = document.getElementById('comment2'), 
      comment3 = document.getElementById('comment3'); 


     if((homeMove.value == 'No') && (transferOrder.value == 'No')){ 
      comment2.style.display = 'none'; 
      comment3.style.display = 'none'; 
      comment1.style.display = 'block'; 
      submitBtn.disabled = true; 
     } 

     // if Home Move - No AND Transfer Order - Yes. Display nothing. Submit button abled 
     if((homeMove.value == 'No') && (transferOrder.value == 'Yes')){ 
      comment1.style.display = 'none'; 
      comment2.style.display = 'none'; 
      comment3.style.display = 'none'; 
      submitBtn.disabled = false; 
     } 

     // If Home Move - Yes AND Transfer Order - NO. Display comment1. Submit button disables 
     if((homeMove.value == 'Yes') && (transferOrder.value == 'No')){ 
      comment1.style.display = 'block'; 
      comment2.style.display = 'none'; 
      comment3.style.display = 'none'; 
      submitBtn.disabled = true; 
     } 

     // If Home Move - Yes AND Transfer Order - Yes AND Order Complete - Yes. Display comment2 Subhmit button abled 
     if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'Yes')){ 
      comment1.style.display = 'none'; 
      comment2.style.display = 'block'; 
      comment3.style.display = 'none'; 
      submitBtn.disabled = false; 
     } 

     // If Home Move - Yes AND Transfer Order - Yes and Order Complete - No. Display comment3. Submit button disabled 
     if((homeMove.value == 'Yes') && (transferOrder.value == 'Yes') && (orderComplete.value == 'No')){ 
      comment1.style.display = 'none'; 
      comment2.style.display = 'none'; 
      comment3.style.display = 'block'; 
      submitBtn.disabled = true; 
     } 
    } 
})(); 

도움이 될 경우 도움이됩니다. 요소가 온 클릭 이벤트를 사용하는

시도를 포커스를 잃으면 감사

+0

:하지만 이벤트에 대한 확인, 당신은 이벤트가 다음 필터를 추가하여 값의 변화를 것을 후속 검사를 할 /// 1594700/onchange-event-delayed-in-fire-ok-with-firefox)이 문제를 설명하고 문제를 해결합니다. – ClydeFrog

+0

'var' 선언을'document.onchange()'위로 옮기 겠지만, 요소가 물론 DOM에서 사라질 수 없다면 ;-) –

답변

0

먼저 document.change를 수행하는 대신 드롭 다운을 변경하는 이벤트를 추가하는 것이 좋습니다.

때로는 onpropertychange가 예를 들어보다 신뢰할 수있는 샷 이벤트입니다. http://stackoverflow.com/questions 아마도 [유래에이 스레드를 (

yourselectboxelement.onpropertychange = function() { 
    if (window.event.propertyName == "value") { 
    // Do stuff here  
    } 
}; 
+0

안녕 Vishal, 당신이 window.event.propertyName을 사용할 때 어떤 의미인지는 확실하지 않습니다. 제발 좀 더 명확히 해 주시겠습니까? 내 HTML에서 ID가 다른 3 개의 선택 태그를 사용하고 있으며 각 드롭 다운에서 다른 YES/NO 조합이있을 때 이벤트가 실행됩니다. 감사합니다. – Cragdo

+0

코드를 업데이트했습니다. 보세요. 3 개의 선택 태그 모두에 대해이 이벤트를 추가 할 수 있습니다. 내부에서 "여기에 할 일"이있는 곳에서 값이 변경되었는지 확인할 수 있습니다. 이것이 더 합리적인 지보십시오. – dreamerkumar

0

IE 만 onchange를 이벤트가 발생합니다.

관련 문제