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>

单击下拉菜单并单击“开”时，范围将更改为 <span>On</span>（用户将On视为所选选项）

如果保存更改，则“打开”选项会刷新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

“如果您保存更改，那么On选项在刷新时选中=”已选择“......您需要使用Cookie或会话变量来执行此操作。

更改选择输入时更改范围：

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/

如何动态检测元素的变化？

2 个答案: