즉석에서 요소에 대한 변경 사항을 감지하는 방법은 무엇입니까?

Question

선택에 따라 다른 요소를 표시하거나 숨기려고하는 드롭 다운 메뉴가 있습니다. 순간

은 HTML 그래서 다음과 같습니다 당신이 드롭 다운 메뉴를 클릭하고 <span>On</span>에에에 스팬 변경을 클릭하면

<div class="main-element"> 
    <div class="something"> 
     <span>Off</span> 
     <select name="example"> 
      <option value="off" selected="selected">Off</option> 
      <option value="on">On</option></select> 
     </select> 
    </div> 
</div> 

(사용자가 선택한 옵션으로에보고)

변경 사항을 저장하면 새로 고침시 켜짐 옵션의 값은 selected="selected"입니다.

지금까지는 모든 것이 좋았지 만 사용자가 선택 드롭 다운을 off/on으로 변경하면 다른 요소를 표시하거나 숨기고 싶습니다.

어떻게 자바 스크립트에서 다음 작업을 수행 할 수 있습니까?

If main-element select is clicked { 
    if <span>On</span> exists { then show X element } 
    else { hide X element} 
} 

그래서/표시하는 즉시 X 요소를 숨 깁니다, 그리고 단지 첫 번째로드합니다.

Answer 1

좋아요? DEMO

$('select').change(function() { 
    var theValue = $('option:selected').val(); 
    if (theValue == 'on') { 
     $('.hidden').show(); 
     $('span').html('On'); 
    } else { 
     $('.hidden').hide(); 
     $('span').html('Off'); 
    } 
}); 

Answer 2

"그리고 당신은 변경 사항을 저장하면, 다음에 옵션은 = 선정했다" "새로 고침"을 선택 ... 당신은 쿠키 나 세션 변수 그렇게해야합니다.

HTML :

<span id="span">Off</span> 
<select id="example" name="example..... 

자바 스크립트 :

document.getElementById("example").onchange = function() { 
    document.getElementById("span").innerHTML = document.getElementById("example").value; 
} 

기본적으로 그 당신이 선택 입력을 변경할 때

는 범위를 변경합니다. 이것을 시도하십시오 : http://jsfiddle.net/wmh6b/

또는 jQuery를 좋아한다면 다음을 시도하십시오. http://jsfiddle.net/wmh6b/1/