新添加的选择选项不显示标题属性答案

【问题标题】：Newly appended select options not displaying title attribute新添加的选择选项不显示标题属性
【发布时间】：2013-04-25 14:57:45
【问题描述】：

我目前正在使用 ajax 将新选项附加到多选框，但即使我尝试向它们添加标题属性，它们似乎根本没有显示。有什么我想念的吗？

这是在 Coffeescript 中完成的：

$.ajax(
        type: 'get'
        url: '/Filter/LookupClassification'
        data: ( term: inputVal )
        dataType: 'json'
        success: (response)->
            select = document.getElementById('getClassBox')
            select.options.length = 0

            $.each(response, (key, value)->
                option = $(
                    '<option/>'
                    'title': value.toUpperCase()
                    'value': key
                ).text(key + ' - ' + value.toUpperCase())

                $('#getClassBox').append(option)
            )

            $('#selectClassBox option').each((index, value)->
                val1 = $(value).val()
                if $('#getClassBox option').val() is val1
                    $('#getClassBox option[value=' + val1 + ']').remove()
            )
    )

【问题讨论】：

title 属性从什么时候开始对options 有效，它怎么可能有用？
@GrantThomas 我正在尝试将它用于鼠标悬停时的工具提示，如下所示：jsfiddle.net/spB3E
它会在 Chrome 26、IE 10 和 Firefox 20.0.1 的悬停上显示，除非我以某种方式看到其他人看不到的东西。
@GrantThomas - 至少从HTML 4开始。
@ÁlvaroG.Vicario 有趣的是 HTML5 规范没有提到“标题”。

标签： javascript jquery html

【解决方案1】：

<option> 元素不能有“title”属性。 See the spec.

edit——我的意思是，如果你想添加一个“title”属性很好，浏览器不会像关注“title”属性那样关注它在 <div> 或 <button> 元素上。

再次编辑——你也应该忽略这一点，因为虽然它不在 HTML5 规范中，但 <option> 元素上的“title”属性显然在某些浏览器中得到支持。

【讨论】：

它们可以（适用于某些浏览器），但不应该，根据您提供的规范说明
@Ian 是的，这是真的；我会详细说明。
我知道你的意思，但供其他人参考:)
哇，原来有些浏览器可以做到！谁知道？（显然@Baadshah :-)
即使@Baadhsha 也没有在所有提到的浏览器中测试。我确定。我在 IE9 测试时看到了他：P

【解决方案2】：

你可以简单地写这个来为你的下拉菜单添加选项：

select.options[select.options.length] = new Option(key + ' - ' + value.toUpperCase(), key);

不要担心标题属性。

【讨论】：

您是否碰巧知道显示超出选择框宽度的选项值的最佳选择是什么？我正在尝试使用最简单的工具提示解决方案，但似乎使用标题属性并不是最好的主意。