(function ($) { $.fn.singleSelect = function () { return this.each(function (i, select) { var input = $(''), inputTooltip = $(select).attr('data-inputtitle'); if (inputTooltip){ input.attr('title', inputTooltip); } select = $(select); input.css('position', 'absolute'); input.css({ 'box-sizing': 'border-box', '-moz-box-sizing': 'border-box', 'margin': 0, 'width': (select.width() - 5) + 'px', 'height': (select.outerHeight() - 2) + 'px', 'border': 'none', 'box-shadow': 'none', 'margin-top': '1px', 'margin-left': '1px', 'z-index': 1000 }); input.hide(); $('body').append(input); select.on('change', function (event) { var value = $(this).val(), newAttr = $('option:selected', $(this)).attr('data-new'); if (!(typeof newAttr !== 'undefined' && newAttr !== false)) { input.hide(); select.data('previous', value); } else { event.stopImmediatePropagation(); // adjust offset, in case the user scrolled input.css(select.offset()); input.show(); if ($.fn.tipsy){ input.tipsy({gravity: 'n', trigger: 'manual'}); input.tipsy('show'); } select.css('background-color', 'white'); input.focus(); } }); $(select).data('previous', $(select).val()); input.on('change', function () { var value = $(this).val(); if (value) { select.children().attr('selected', null); var existingOption = select.children().filter(function (i, option) { return ($(option).val() == value); }); if (existingOption.length) { existingOption.attr('selected', 'selected'); } else { var option = $('