Select : Title only if option too wide

by Bruno G.

HTML

<select id="sel" multiple="multiple" size="10" style="width:80px">
	<option title="Test 1">Option 1</option>
	<option title="Test 2">Option 2 with longer text</option>
	<option title="Test 3">Option 3</option>
	<option title="Test 4">Option 4</option>
	<option title="Test 5">Option 5</option>
	<option title="Test 6">Option 6</option>
	<option title="Test 7">Option 7</option>
	<option title="Test 8">Option 8</option>
	<option title="Test 9">Option 9</option>
</select>

JavaScript

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
// http://stackoverflow.com/a/15302051/854760
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

console.clear();
console.log('Sel : '+$('#sel').width());
var maxW = Math.round($('#sel').width() / 8.5);
console.log('Vis Char : '+maxW);
$('#sel option').each(function(){
    var t = $(this);
    var txt = t.text();
    var txtW = txt.length;
    if (txtW <= maxW) t.attr('title', '');
    //console.log(txt, maxW, txtW);
});