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.
- (function($) {
- 'use strict';
- $.fn.jvFloat = function () {
- return this.filter('input:not([type=submit]), textarea, select').each(function() {
- function getPlaceholderText($el) {
- var text = $el.attr('placeholder');
- if (typeof text == 'undefined') {
- text = $el.attr('title');
- }
- return text;
- }
- function setState () {
- var currentValue = $el.val();
- if (currentValue == null) {
- currentValue = '';
- }
- else if ($el.is('select')) {
- var placeholderValue = getPlaceholderText($el);
- if (placeholderValue == currentValue) {
- currentValue = '';
- }
- }
- placeholder.toggleClass('active', currentValue !== '');
- }
- function generateUIDNotMoreThan1million () {
- var id = '';
- do {
- id = ('0000' + (Math.random()*Math.pow(36,4) << 0).toString(36)).substr(-4);
- } while (!!$('#' + id).length);
- return id;
- }
- function createIdOnElement($el) {
- var id = generateUIDNotMoreThan1million();
- $el.prop('id', id);
- return id;
- }
- var $el = $(this).wrap('<div class=jvFloat>');
- var forId = $el.attr('id');
- if (!forId) { forId = createIdOnElement($el);}
- var required = $el.attr('required') || '';
- var placeholder = '';
- var placeholderText = getPlaceholderText($el);
- if ($(this).is('textarea')) {
- placeholder = $('<label class="placeHolder ' + ' textarea ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
- } else {
- placeholder = $('<label class="placeHolder ' + required + '" for="' + forId + '">' + placeholderText + '</label>').insertBefore($el);
- }
- setState();
- $el.bind('keyup blur', setState);
- });
- };
- })(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 *".
- <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>