1

リストメニューにツールチップまたはホバーテキストを表示しようとしています。これにより、ユーザーがその値を選択すると、追加のテキストが提供されます。出来ますか ？データは現在ハードコードされた配列に格納されているため。

Code:
<select name="Interests" id="Interests">
 <?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
 for($i = 0; $i < count($arr); $i++)
 {
    echo "<option value=\"{$arr[$i]}\" {$selected}>{$arr[$i]}</option>\n"; 
 }
?>
</select>

したがって、サイクリングを選択すると、リストメニューにテキストが表示されるはずです。親切なアドバイス。ありがとう！

4

3 に答える 3

2

あなたがやろうとしていることは、PHPで実装されたものではなく、Javascriptです。PHPには、で実行されるコードが含まれ、ロードしたいホバーテキスト/ツールチップなどのserver-sideDOM要素またはコンポーネントを処理しません。client-sideJavascriptは、server-sideコードがクランチされた後にブラウザによって解析され、すぐに読み込まれた後にページへの追加の変更を処理します。

学習（または、慣れている場合は使用）を検討することをお勧めjQueryします。これは、タスクを支援するためです。これは、使いやすさのためにバインディングが簡略化されたJavascriptライブラリです。すばらしいドキュメントとそれを毎日使用する多くのプラグインがあります。

参照： http： //jquery.com/

楽しんで頑張ってください！

于 2012-07-10T15:23:11.447 に答える
1

これが可能な解決策です。これはjQueryを使用します。これは、title-attributeを使用できず、別の子要素を-Containerに配置できないため、select有効なHTMLではありません。

デモを見る：

http://jsfiddle.net/DLyMG/

使い方

これの秘訣は、ホバーをバインドすることinterests.hoverです。最初の機能はselect-boxを超えたときにトリガーされ、2番目の機能は離れたときにトリガーされます。私はこの理由でを追加しましたtimeout：ユーザーが何かを選択すると、彼は要素の外に移動します（リストが要素自体よりも長いため）。したがって、彼が何かを選択すると、彼もmouseoutイベントをトリガーするので、がありtimeoutます。

onchange2つ目は、 -eventをバインドすることです。これは以下で実行されます。ユーザーが値を選択すると、ツールチップの内容が変更され、任意のテキストまたはHTMLを追加できます。

Javascript

<script>

$(document).ready(function () {

    var interests       = $('#Interests');
    var tooltip         = $('#tooltip');
    var tooltipInfo     = $('#tooltip_info');

    interests.hover(
        function() {
            tooltip.fadeIn(200);
        },
        function() {
            setTimeout ( function () {
                tooltip.fadeOut(200); tooltipInfo.html();
            }, 1000);
        }
    );

    interests.bind('change', function() {
        tooltipInfo.html('user has changed the value');
    });

});

</script>

CSS

<style>

aside.tooltip {
    display:        none;
    position:       absolute;
    top:            20px;
    left:           300px;
}

</style>

HTML

<select id="Interests">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>

<aside id="tooltip" class="tooltip">
    Hey, I'm a Tooltip.
    <span id="tooltip_info"></span>
</aside>
ノート

もちろん、これにはさらにいくつかの改善が必要です。これがどのように可能であるかの単なる例。また、次のように、ドキュメントにjQueryライブラリを含める必要があります。

<script src="src/js/com.jquery/1.7/jquery-1.7.min.js"></script>
于 2012-07-10T15:34:47.553 に答える
1

選択ボックス内の値の変更時にコンテンツを表示したいですか? jQuery change() を使用http://jsfiddle.net/PxGEc/1/

于 2012-07-10T15:51:41.777 に答える