6

フォームに選択要素があり、ドロップダウンが表示されていない場合にのみ何かを表示したいと考えています。私が試したこと：

  • 奇数のクリックはドロップダウンが表示されていることを意味し、偶数のクリックはドロップダウンが表示されていないことを意味します。ドロップダウンが消える可能性のある他の方法 (エスケープを押す、別のウィンドウにタブ移動する) を見逃しており、これを正しいクロスブラウザーにするのは難しいと思います。
  • イベントを変更しますが、これらは選択ボックスの値が変更されたときにのみトリガーされます。

アイデア？

4

7 に答える 7

4

これが私が好む方法です。焦点とぼかしはそれがどこにあるかです。

<html>
    <head>
        <title>SandBox</title>
    </head>
    <body>
        <select id="ddlBox">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
        </select>
        <div id="divMsg">some text or whatever goes here.</div>
    </body>
</html>
<script type="text/javascript">
    window.onload = function() {
        var ddlBox = document.getElementById("ddlBox");
        var divMsg = document.getElementById("divMsg");
        if (ddlBox && divMsg) {
            ddlBox.onfocus = function() {
                divMsg.style.display = "none";
            }
            ddlBox.onblur = function() {
                divMsg.style.display = "";
            }
            divMsg.style.display = "";
        }
    }
</script>
于 2009-07-11T01:27:37.353 に答える
2

あなたが求めている条件付きコンテンツは、それほど難しくありません。次の例では、目標を達成するためにjQueryを使用します。

<select id="theSelectId">
  <option value="dogs">Dogs</option>
  <option value="birds">Birds</option>
  <option value="cats">Cats</option>
  <option value="horses">Horses</option>
</select>

<div id="myDiv" style="width:300px;height:100px;background:#cc0000"></div>

選択した #theSelectId の値に基づいて #myDiv を表示/非表示にするイベントをいくつか関連付けます。

$("#theSelectId").change(function(){
  if ($(this).val() != "dogs")
    $("#myDiv").fadeOut();
  else
    $("#myDiv").fadeIn();
});
于 2009-07-01T19:42:17.920 に答える
0

この基本的な例は、setIntervalを使用してそれを行う方法を示しています。選択したメニューの表示状態を毎秒チェックし、コンテンツの一部を非表示または表示します。問題の説明に従って機能し、選択メニューを非表示にしたものに関係なく、それに応じてそのコンテンツが表示されます。言い換えると、toggleDisplay（）はそれを示すためだけに設定されました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">

var STECHZ = {
    init : function() {
        STECHZ.setDisplayedInterval();
    },
    setDisplayedInterval : function() {
        STECHZ.isDisplayedInterval = window.setInterval(function(){
            if ( document.getElementById( "mySelectMenu" ).style.display == "none" ) {
                document.getElementById( "myObjectToShow" ).style.display = "block";
            } else {
                document.getElementById( "myObjectToShow" ).style.display = "none";
            }
        }, 1000);
    },
    isDisplayedInterval : null,
    toggleDisplay : function() {
        var mySelectMenu = document.getElementById( "mySelectMenu" );
        if ( mySelectMenu.style.display == "none" ) {
            mySelectMenu.style.display = "block";
        } else {
            mySelectMenu.style.display = "none";
        }
    }
};

window.onload = function(){

    STECHZ.init();

}

</script>
</head>
<body>
    <p>
        <a href="#" onclick="STECHZ.toggleDisplay();return false;">Click to toggle display.</a>
    </p>
    <select id="mySelectMenu">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <div id="myObjectToShow" style="display: none;">Only show when mySelectMenu is not showing.</div>
</body>
</html>
于 2008-09-26T23:34:18.053 に答える
0

私の最初の質問は、なぜこれをやろうとしているのかということです。この動作を示すアプリケーションは思い浮かびませんし、この状況が発生する正当な理由も思いつきません。

正当な理由がないと言っているわけではありませんが、それが何であるかはわかりません:)。

于 2008-09-26T19:41:36.503 に答える
0

直接的なサポートはないと思います。また、select の onblur に座っていることもできます。select がフォーカスを失ったときに呼び出されます。

重要度に応じて、独自のコントロールを実装するか、同様のドロップダウン メニュー コントロールのようなものから始めることができます。通常、アプリケーションにとって重要でない限り、これを行う価値はありません。この道を行くことに決めた場合は、dojo を基礎として使用してそれをやろうとしている人についての議論を次に示します。

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select

于 2008-09-26T19:48:17.613 に答える
0

JavaScript 変数を使用して状態を追跡します。これを「openX」と呼びます。

onfocus="openX=true" onblur="openX=false" onchange="openX=false"

于 2008-09-26T19:49:04.630 に答える
0

jQuery で、何かが表示されているかどうかをテストするには:

$('something').css('display')

これは、'block'、'inline'、または 'none' (要素が表示されていない場合) などを返します。これは、CSS の「display」属性を単に表現したものです。

于 2008-09-26T22:07:40.663 に答える