Newly appended select options not displaying title attribute

Question

I'm currently using ajax to append new options to a multiple select box, but even though I'm trying to add title attributes to them, they don't seem to be displaying at all. Is there something that I'm missing?

This is done in 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()
            )
    )

Answer 1

The <option> element can't have a "title" attribute. See the spec.

edit — by that I mean that while it's fine to add a "title" attribute if you want to, the browser won't pay attention to it like it would to a "title" attribute on a <div> or <button> element.

edit again — also you should probably ignore this since, though it's not in the HTML5 spec, the "title" attribute on <option> elements is apparently supported in some browsers.

Answer 2

You could simply write this to add options to your dropdown:

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

Don't bother about title attributes.