singleselect.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. (function ($) {
  2. $.fn.singleSelect = function () {
  3. return this.each(function (i, select) {
  4. var input = $('<input/>'),
  5. gravity = $(select).attr('data-tipsy-gravity'),
  6. inputTooltip = $(select).attr('data-inputtitle');
  7. if (inputTooltip){
  8. input.attr('title', inputTooltip);
  9. }
  10. if (typeof gravity === 'undefined') {
  11. gravity = 'n'
  12. }
  13. select = $(select);
  14. input.css('position', 'absolute');
  15. input.css({
  16. 'box-sizing': 'border-box',
  17. '-moz-box-sizing': 'border-box',
  18. 'margin': 0,
  19. 'width': (select.width() - 5) + 'px',
  20. 'height': (select.outerHeight() - 2) + 'px',
  21. 'border': 'none',
  22. 'box-shadow': 'none',
  23. 'margin-top': '1px',
  24. 'margin-left': '1px',
  25. 'z-index': 1000
  26. });
  27. input.hide();
  28. $('body').append(input);
  29. select.on('change', function (event) {
  30. var value = $(this).val(),
  31. newAttr = $('option:selected', $(this)).attr('data-new');
  32. if (!(typeof newAttr !== 'undefined' && newAttr !== false)) {
  33. input.hide();
  34. select.data('previous', value);
  35. } else {
  36. event.stopImmediatePropagation();
  37. // adjust offset, in case the user scrolled
  38. input.css(select.offset());
  39. input.show();
  40. if ($.fn.tipsy){
  41. input.tipsy({gravity: gravity, trigger: 'manual'});
  42. input.tipsy('show');
  43. }
  44. select.css('background-color', 'white');
  45. input.focus();
  46. }
  47. });
  48. $(select).data('previous', $(select).val());
  49. input.on('change', function () {
  50. var value = $(this).val();
  51. if (value) {
  52. select.children().attr('selected', null);
  53. var existingOption = select.children().filter(function (i, option) {
  54. return ($(option).val() == value);
  55. });
  56. if (existingOption.length) {
  57. existingOption.attr('selected', 'selected');
  58. } else {
  59. var option = $('<option/>');
  60. option.attr('selected', 'selected').attr('value', value).text(value);
  61. select.children().last().before(option);
  62. }
  63. select.val(value);
  64. select.css('background-color', null);
  65. input.val(null);
  66. input.hide();
  67. select.change();
  68. } else {
  69. var previous = select.data('previous');
  70. select.children().attr('selected', null);
  71. select.children().each(function (i, option) {
  72. if ($(option).val() == previous) {
  73. $(option).attr('selected', 'selected');
  74. }
  75. });
  76. select.removeClass('active');
  77. input.hide();
  78. }
  79. });
  80. input.on('blur', function () {
  81. $(this).change();
  82. if ($.fn.tipsy){
  83. $(this).tipsy('hide');
  84. }
  85. });
  86. input.click(function(ev) {
  87. // prevent clicks to close any container
  88. ev.stopPropagation();
  89. });
  90. });
  91. };
  92. })(jQuery);