Javascript 如何动态检测对元素的更改？

我有一个下拉菜单，根据选择，我想显示/隐藏另一个元素

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

这样它就可以动态地显示/隐藏

X

元素，而不仅仅是在第一次加载时

如果保存更改，则On选项的selected=“selected”On refresh。。。您需要使用cookie或会话变量来实现这一点

要在更改“选择”输入时更改量程，请执行以下操作：

HTML:

基本上是这样。试试这个：

或者，如果您喜欢jQuery，请尝试以下方法：

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

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

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

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