我遇到了一些Java代码问题。该插件是“RD selectmenu”。
错误很简单......但我似乎无法找到问题。
在选择输入上，如果标签（选项）与值不同，则返回单词“null”onChange
我不是java或查询编码器，因此我将其发布到社区，以期解决错误。
代码依赖于Bootstrap V 3.3.6+和JQuery。
(function() {
(function($, document, window) {
/**
* Initial flags
* @public
*/
var RDSelectMenu, isMobile;
isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
/**
* Creates a select.
* @class RDSelectMenu.
* @public
* @param {HTMLElement} element - The element to create the select for.
* @param {Object} [options] - The options
*/
RDSelectMenu = (function() {
/**
* Default options for select.
* @public
*/
RDSelectMenu.prototype.Defaults = {
valueIconClass: 'rd-select-value-icon fa-angle-down',
callbacks: null
};
function RDSelectMenu(element, options) {
this.options = $.extend(true, {}, this.Defaults, options);
this.$element = $(element);
this.$wrap = this.$element.wrap('<div class="rd-select"></div>').parent();
this.$pseudoValue = null;
this.$pseudoOptions = null;
this.$win = $(window);
this.$doc = $(document);
this.initialize();
}
/**
* Initializes the Parallax.
* @protected
*/
RDSelectMenu.prototype.initialize = function() {
var ctx;
ctx = this;
ctx.hideOriginalDOM();
ctx.createPseudoDOM();
ctx.applyHandlers();
return ctx;
};
/**
* Appends select pseudo DOM
* @protected
*/
RDSelectMenu.prototype.createPseudoDOM = function() {
var ctx;
ctx = this;
ctx.$pseudoValue = $('<div/>', {
'class': 'rd-select-trigger ' + ctx.$element.get(0).className
}).append('<span class="rd-select-value">' + ctx.$element.find('option:selected').text() + '</span>').append('<span class="' + ctx.options.valueIconClass + '"></span>');
ctx.$pseudoOptions = $('<ul/>', {
'class': 'rd-select-menu'
});
ctx.$element.find('option').each(function() {
var $option;
$option = $(this);
return ctx.$pseudoOptions.append($('<li/>', {
'class': 'rd-select-option',
'text': $option.text()
}).addClass($option.is(':selected') ? 'selected' : false));
});
ctx.$wrap.append(ctx.$pseudoValue).append(ctx.$pseudoOptions);
return ctx;
};
/**
* Hides original select
* @protected
*/
RDSelectMenu.prototype.hideOriginalDOM = function() {
var ctx;
ctx = this;
ctx.$element.css({
position: 'absolute',
margin: 0,
padding: 0,
top: 0,
left: 0,
width: isMobile ? '100%' : 0,
height: isMobile ? '100%' : 0,
border: 'none',
overflow: 'hidden',
opacity: 0,
'z-index': isMobile ? 9999999 : -9999999
});
return ctx;
};
/**
* Open select menu
* @protected
*/
RDSelectMenu.prototype.open = function() {
var ctx;
ctx = this;
ctx.$wrap.addClass('rd-select-open');
if (!ctx.$element.is(':focus')) {
ctx.$element.focus();
}
return ctx;
};
/**
* Close select menu
* @protected
*/
RDSelectMenu.prototype.close = function() {
var ctx;
ctx = this;
ctx.$wrap.removeClass('rd-select-open');
return ctx;
};
RDSelectMenu.prototype.change = function(ctx, e) {
var $this;
$this = $(this);
ctx.$element.val($this.text()).trigger('change').trigger('propertychange').focus();
if (e.type === 'click') {
$.proxy(ctx.close, ctx)();
}
return this;
};
RDSelectMenu.prototype.originalChange = function() {
this.$pseudoValue.find('.rd-select-value').text(this.$element.val());
this.$pseudoOptions.find('.rd-select-option').eq(this.$element.find('option:selected').index()).addClass('selected').siblings().removeClass('selected');
return this;
};
RDSelectMenu.prototype.keyDown = function(e) {
var next, prev;
switch (e.keyCode) {
case 32:
case 37:
case 39:
e.preventDefault();
break;
case 38:
e.preventDefault();
prev = this.$pseudoOptions.find('.rd-select-option.selected').prev();
if (prev.length) {
$.proxy(this.change, prev[0], this)(e);
}
break;
case 40:
e.preventDefault();
next = this.$pseudoOptions.find('.rd-select-option.selected').next();
if (next.length) {
$.proxy(this.change, next[0], this)(e);
}
break;
case 13:
e.preventDefault();
if (this.$wrap.hasClass('rd-select-open')) {
$.proxy(this.close, this)();
} else {
$.proxy(this.open, this)();
}
}
};
/**
* Apply all select event handlers
* @protected
*/
RDSelectMenu.prototype.applyHandlers = function() {
var ctx;
ctx = this;
if (!isMobile) {
ctx.$element.on('focus', $.proxy(ctx.open, ctx));
ctx.$doc.find('*').on('focus', function(e) {
var target;
target = e.target;
if (target !== ctx.$element[0] && !$(target).parents('.rd-select-menu').length) {
return $.proxy(ctx.close, ctx)();
}
});
ctx.$element.on('keydown', $.proxy(ctx.keyDown, ctx));
ctx.$pseudoValue.on('click', $.proxy(ctx.open, ctx));
ctx.$pseudoOptions.find('li').each(function() {
var $this;
$this = $(this);
return $this.on('click', $.proxy(ctx.change, this, ctx));
});
ctx.$doc.on('click', function(e) {
var target;
target = e.target;
if (target !== ctx.$wrap[0] && !$(target).parents('.rd-select').length) {
return $.proxy(ctx.close, ctx)();
}
});
}
ctx.$element.on('change propertychange', $.proxy(ctx.originalChange, ctx));
return ctx;
};
return RDSelectMenu;
})();
/**
* The jQuery Plugin for the RD Parallax
* @public
*/
$.fn.extend({
RDSelectMenu: function(options) {
return this.each(function() {
var $this;
$this = $(this);
if (!$this.data('RDSelectMenu')) {
return $this.data('RDSelectMenu', new RDSelectMenu(this, options));
}
});
}
});
return window.RDSelectMenu = RDSelectMenu;
})(window.jQuery, document, window);
/**
* The Plugin AMD export
* @public
*/
if (typeof module !== "undefined" && module !== null) {
module.exports = window.RDSelectMenu;
} else if (typeof define === 'function' && define.amd) {
define(["jquery"], function() {
'use strict';
return window.RDSelectMenu;
});
}
}).call(this);
HTML Code
<div class="form-group">
<select id="pick" name="pick" class="rd-mailform-select form-control">
<option value="">Select Asset Type...</option>
<option value="1" >Property</option>
<option value="2">Vehicle</option>
<option value="3">Boat</option>
<option value="4">Luxury Item</option>
</select>
</div>