Adding title attribute to select option dynamically with .append()

Question

Javascript, Jquery, HTML

I am adding select options to a select box dynamically. I take each unique element in an array and add it as an option to the select element. It works great, but I need to add a title attribute at the same time, with the same value as the option text. The end goal of this is to make tooltips for each option.

So instead of <option>value</option>, it looks like

<option title="value">value</option>

Does that make sense?

Current HTML:

<select id="Process_Issue" class="fieldLabel2 IncidentInputField dynamicFields1"></select>

JS:

$.each(eliminateDuplicates(aryProcess), function (key, value) { $('#Process_Issue').append($("<option/>", { text: cleanNulls(value) })); });

Solution 1

You can just specify the title upon appending:

JSFiddle

HTML

<select id="my_select"></select>

JS

$('#my_select').append('<option title="value1">value1</option>');
$('#my_select').append('<option title="value2">value2</option>');
$('#my_select').append('<option title="value3">value3</option>');

Solution 2

You can set the title attribute

$('#Process_Issue').append(
    $("<option/>", { text: value }).attr("title",value)
 ); 

Here is a working sample http://jsbin.com/ozudoTod/1/

Solution 3

You seem to be using the same selector multiple times for each iteration in the array. Instead cache it and save some lookup time.

var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
     var val = cleanNulls(value);
     $select .append($("<option/>", { 
          text: val,
          title: val
     })); 
});

If this does not work use .attr method to hook up the attribute to the element.

var $select = $('#Process_Issue');
$.each(eliminateDuplicates(aryProcess), function (key, value) { 
    var val = cleanNulls(value);
    $('<option/>').attr({
         text: val,
         title: val
    }).appendTo($select);
});

Solution 4

A cleaner way is to create the element before with all values then append like so:

value = cleanNulls( value );
var option = $( '<option/>', {
    title: value,
    text: value
});

$('#Process_Issue').append( option );

this method is a lot cleaner and easier to read / maintain

View more solutions

Comments

[dah97765]

you're right. However, there will only ever be a few options in each select box (multiple select boxes, all happening dynamically on demand), but each with ~12 or less options, so I'm not all that concerned about speed in this instance. Good answer!

[dah97765]

All of the answers thus far are correct, but you had it first and its more inline with my current code. I put it in a loop obviously (instead of value1, value2, etc). Thanks for the swift response!

[dah97765]

very similar to the answer from Sushanth .. and a good one. Thanks!

[MonkeyZeus]

Glad I could help, I figured that a more straight-forward answer is what you wanted.

[dah97765]

This is pretty much what I ended up with, based on the answer from MonkeyZeus. I like the format of: $('#Process_Issue').append($('<option title="' + cleanNulls(value) + '">' + cleanNulls(value) + '</option>')); rather than what you have (and what I had when I posted the question). I think it just reads better and is less confusing at a glance.