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

ドロップダウン メニューをクリックして [オン] をクリックすると、スパンが次のように変わります <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最初のロード時だけでなく、オンザフライで要素を表示/非表示にするようにします。

4

2 に答える 2

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 に答える
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 に答える