Floating Labels for Select Dropdown

Floating Labels for Select Dropdown

I am using this code which returns "undefined" for the label of Select Boxes. This is because presumably the placeholder attribute is not supported for select elements. 

  1. (function($) {
  2.   'use strict';
  3.   $.fn.jvFloat = function () {
  4.     return this.filter('input:not([type=submit]), textarea, select').each(function() {
  5.       function getPlaceholderText($el) {
  6.         var text = $el.attr('placeholder');
  7.         if (typeof text == 'undefined') {
  8.             text = $el.attr('title');
  9.         }
  10.         return text;
  11.       }
  12.       function setState () {
  13.         var currentValue = $el.val();
  14.         if (currentValue == null) {
  15.           currentValue = '';
  16.         }
  17.         else if ($el.is('select')) {
  18.           var placeholderValue = getPlaceholderText($el);
  19.           if (placeholderValue == currentValue) {
  20.             currentValue = '';
  21.           }
  22.         }
  23.         placeholder.toggleClass('active', currentValue !== '');
  24.       }
  25.       function generateUIDNotMoreThan1million () {
  26.         var id = '';
  27.         do {
  28.           id = ('0000' + (Math.random()*Math.pow(36,4) << 0).toString(36)).substr(-4);
  29.         } while (!!$('#' + id).length);
  30.         return id;
  31.       }
  32.       function createIdOnElement($el) {
  33.         var id = generateUIDNotMoreThan1million();
  34.         $el.prop('id', id);
  35.         return id;
  36.       }
  37.       var $el = $(this).wrap('<div class=jvFloat>');
  38.       var forId = $el.attr('id');
  39.       if (!forId) { forId = createIdOnElement($el);}
  40.       var required = $el.attr('required') || '';
  41.       var placeholder = '';
  42.       var placeholderText = getPlaceholderText($el);
  43.       if ($(this).is('textarea')) {
  44.         placeholder = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
  45.       } else {
  46.         placeholder = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
  47.       }
  48.       setState();
  49.       $el.bind('keyup blur', setState);
  50.     });
  51.   };
  52. })(window.jQuery || window.Zepto || window.$);

However, how could I modify the above so that the label takes the value of the class "gf_placeholder" as seen below? In the below example the label would be "Salutation *". 

  1. <select name="input_6" id="input_19_6" class="gfield_select" tabindex="0" aria-required="true" aria-invalid="false" style="outline: none;"><option value="" selected="selected" class="gf_placeholder">Salutation *</option><option value="Miss">Miss</option><option value="Ms.">Ms.</option><option value="Mrs.">Mrs.</option><option value="Mr.">Mr.</option><option value="Dr.">Dr.</option></select>