Как обнаружить изменения элемента на лету?

Question

У меня есть раскрывающееся меню, которое в зависимости от выбора, я хочу показать/скрыть другой элемент.

На данный момент HTML выглядит так:

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

При нажатии на кнопку выпадающего меню и нажмите на On, изменения пролетных к <span>On</span> (пользователь видит в качестве выбранного варианта)

, и если вы сохраните изменения, тогда опция «Вкл.» Имеет значение selected="selected" при обновлении.

Все до сих пор хорошо, но я хочу делать все «на лету», поэтому, когда пользователь меняет выбранный снимок на «включено-выключено», мне нужен еще один элемент для показа/скрытия.

Как я могу сделать следующее в javascript?

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

Javascript:

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

В принципе это. Попробуйте это: http://jsfiddle.net/wmh6b/

Или, если вы представляете себе Jquery, попробуйте следующее: http://jsfiddle.net/wmh6b/1/