显示动态添加的下拉项目的工具提示

看到问题的标题，读者头脑中的第一个直觉就是它是一个重复的问题 - 但事实并非如此。我已经提到了下列和其他一些关于在下拉列表中显示工具提示的帖子。它们用于静态添加项目。显示动态添加的下拉项目的工具提示

How to add tooltips to dropdownlist items, using jquery?

但我在下拉列表项在第二个下拉基于第一选择动态添加的场景。工具提示首先显示，但不显示第二个。

注：该网站需要支持IE6+，Chrome和Firefox

代码

<html> 


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() 
{ 


//Tooltip for all dropdowns 
$("select").each(function() 
{ 
    var i =0; 
    var sel = this; 
    for(i=0;i<sel.length;i++) 
    { 
     sel.options[i].title = sel.options[i].text;  
    } 
}); 




//Dropdown Change Event 

$("#ddlColor").change(function() 
{ 


//Remove existing entries from dropdown 
$('#ddlExample').empty(); 
var n = $(this).val(); 


switch(n) 
{ 

case 'green': 
    $('#ddlExample').append($('<option></option>').val('Mango').html('Mango')); 
    break; 

case 'red': 
    $('#ddlExample').append($('<option></option>').val('Apple').html('Apple')); 
    break; 

case 'blue': 
    $('#ddlExample').append($('<option></option>').val('Blueberry').html('Blueberry')); 
    break; 

} 

}); 

}); 

</script> 

<body> 

<div id="first"> 

<select id="ddlColor"> 
    <option value="green">Green</option> 
    <option value="red">Red</option> 
    <option value="blue">Blue</option> 
</select> 


Sample: 
<select id="ddlExample"> 
</select> 


</div> 

</body> 

</html>

来源

2014-06-30 Lijo

你能提供一个小提琴吗？ –

@曼哈顿先生我没有小提琴 - 但完整的代码已经出现在问题中。你可以很好地将它复制到记事本中，将其保存为html，然后在浏览器中打开以查看它的行为。 – Lijo

我想'$（'＃ddlExample'）。attr（“title”，“Mango”）;'可能是你在找什么...... –

您可以使用ATTR /道具做到这一点：

var option = $('<option></option>'); 
switch(n){ 
    case 'green': 
     option.val('Mango'); 
     option.html('Mango'); 
     option.attr('title','Mango'); 
     break; 
    //and so on 
} 
$('#ddlExample').append(option);

小提琴： http://jsfiddle.net/LJANW/

来源

2014-06-30 12:38:13

显示动态添加的下拉项目的工具提示

回答

相关问题