Question

我正在尝试在列表菜单中显示工具提示或悬停文本，如果用户选择该值，则会提供其他文本。可能吗？由于数据当前存储在硬编码数组中。

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>

因此，如果我选择骑行，则列表菜单上应该出现文字。好心提醒。谢谢！

Answer 1

你试图做的不是用PHP实现的东西，而是Javascript。 PHP涉及在server-side上运行的代码，不涉及DOM元素或client-side组件，例如您希望加载的悬停文本/工具提示。在server-side代码被压缩之后，浏览器会解析Javascript，并会在立即加载后对页面进行其他更改。

我建议您研究（或使用，如果熟悉的话）jQuery，因为它可以帮助您完成任务。它是一个简化绑定的Javascript库，易于使用。每天都有很好的文档和许多插件使用它。

参考：http://jquery.com/

享受并祝你好运！

Answer 2

这是一个可能的解决方案。它使用jQuery，因为你不能使用title - 属性，你不能将另一个子元素放入select - 容器中，它就不是有效的HTML。

参见演示：

http://jsfiddle.net/DLyMG/

如何运作

这样做的诀窍是绑定悬停interests.hover。当你越过select - 框时会触发第一个功能，当你离开时会触发第二个功能。因为这个原因，我添加了timeout：当用户选择某些内容时，他会移出元素（因为列表比元素本身长）。因此，当他选择某些内容时，他也会触发mouseout事件，因此我们会timeout。

第二件事是绑定onchange - 事件，这将在下面完成。当用户选择一个值时，工具提示的内容会发生变化，您可以根据需要添加任何文本或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>

Answer 3

您希望在选择框中的内容中显示内容吗？使用jQuery change（）http://jsfiddle.net/PxGEc/1/

数组中的工具提示/悬停文本

3 个答案:

参见演示：

如何运作

的Javascript

CSS

HTML