-3

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

目前 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>（用户将 On 视为选定选项）

如果您保存更改，则 On 选项具有selected="selected"on refresh。

到目前为止一切都很好，但我想即时做事，所以当用户将选择下拉菜单更改为关闭/打开时，我希望显示/隐藏另一个元素。

如何在 javascript 中执行以下操作？

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

这样它就可以X即时显示/隐藏元素，而不仅仅是在第一次加载时。

4

2 回答 2

1

像这样？演示

$('select').change(function() {
    var theValue = $('option:selected').val();
    if (theValue == 'on') {
         $('.hidden').show(); 
        $('span').html('On');
    } else {
        $('.hidden').hide();
        $('span').html('Off');
    }
});
于 2013-06-24T18:56:18.360 回答
1

“如果您保存更改，则 On 选项在刷新时具有 selected="selected" ”......您需要使用 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/

于 2013-06-24T19:06:04.863 回答