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 涉及在 DOM 上运行的代码，server-side并且不处理 DOM 元素或client-side组件，例如您希望加载的悬停文本/工具提示。Javascript 在代码被压缩后由浏览器解析，server-side并在立即加载后处理对您的页面的其他更改。

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

参考：http: //jquery.com/

享受和好运！

于 2012-07-10T15:23:11.447 回答
1

这是一个可能的解决方案。它使用 jQuery，因为您不能使用title-attribute 并且不能将另一个子元素放入select-Container，因此它不是有效的 HTML。

见演示：

http://jsfiddle.net/DLyMG/

这个怎么运作

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

第二件事是绑定onchange-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 回答