开发者

Html + jquery: Need to display selected dropdown text in a tooltip using jquery tooltip plugin

开发者 https://www.devze.com 2023-02-15 07:22 出处:网络
I need to display the text of selected option of a dropdown list in a tooltip. For this I\'m using jquery\'s tooltip plugin.

I need to display the text of selected option of a dropdown list in a tooltip. For this I'm using jquery's tooltip plugin.

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

Edit: Code from comment below:

<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>

Using this, I see the text this.text in the tooltip, but what I want is text1 or text2 based on selected option. Is there anyway we can assign the title to selected text of the dropdown?

Of course it is working fine, if I use mouseover instead of tooltip class. But I want to achieve this using jQuery tooltip only as it is used extensively in my website

<select name="dropdown" onmouseover="this.title=this.text">
开发者_开发问答    <option value=1>Text1 </option>
    <option value=2>Text2</option>

Thanks in advance, Sreedhar.


Have you tried anything like this? You can see 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');

The idea here is to bind to the change event on the select and then set it's title attribute to the text of the option element that was selected. You also need to provide a bodyHandler for tooltip() since you need the text of the tooltip to be dynamic.


This is what you need to do ...

$(element).bind("mouseover", function () {

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

});  
0

精彩评论

暂无评论...
验证码 换一张
取 消