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) })); });

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) })); });

• javascript
• jquery
• select
• append

4 Answers 4

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>');

You can set the title attribute

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

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

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);
});

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