Question

我需要在工具提示中显示下拉列表中所选选项的文本。为此，我使用的是jquery的工具提示插件。

<select name="dropdown" class="tooltip" title="this.text">
    <option value=1>Text1 </option>
    <option value=2>Text2</option>

修改以下评论代码：

<select name="release_version" id="release_version" class="tooltip" title="this.text" onChange="updateBuildPath(this.value);">
    <option value="12.5" selected="selected">Snapper</option>
    <option value="12.1">R12SP1</option><option value="12">R12</option>
    <option value="11.2">R11.2 SP4</option>
</select>

使用此功能，我会在工具提示中看到文字this.text，但根据所选选项，我想要的是text1或text2。无论如何我们可以将title分配给下拉列表的选定文本吗？

当然，如果我使用mouseover而不是tooltip类，它工作正常。但是我想使用jQuery工具提示来实现这一点，因为它在我的网站中被广泛使用

<select name="dropdown" onmouseover="this.title=this.text">
    <option value=1>Text1 </option>
    <option value=2>Text2</option>

提前致谢， Sreedhar。

Answer 1

你试过这样的事吗？您可以看到a live demo on jsFiddle

//add a tooltip for the select box
//with a custom bodyHandler to dynamically update the tooltip text
$("select").tooltip({
    left: 25,
    bodyHandler: function(){
                     return $('#release_version').attr('title');
                 }
});

//bind an event handler for the change event
//so that when a new option is selected, the title for the 
//select element can be updated
$('#release_version').bind('change', function(e){
    var newTitle='';
    $("#release_version option:selected")
        .each(function () {
                 newTitle+= $(this).text() + " ";
              });

    $(this).attr('title', newTitle);
});

//trigger the initial selection so that the text of the element marked as
//selected when the page loads will be selected when the page loads
$('#release_version').trigger('change');

此处的想法是绑定change上的select事件，然后将其title属性设置为text元素的option被选中了。您还需要为bodyHandler提供tooltip()，因为您需要工具提示的文字是动态的。

Answer 2

这是你需要做的......

$（element）.bind（＆＃34; mouseover＆＃34;，function（）{

    if ($(element)[0])
    {
        $(element)[0].title = $(element)[0].options[$(element)[0].selectedIndex].text;
    }       

});

Html + jquery：需要使用jquery tooltip插件在工具提示中显示选定的下拉文本

2 个答案: