Question

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

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>

Answer 1

你可以使用attr / prop来做到这一点：

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/

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

1 个答案: