在change
dropdownlist
项目更改时Google Chrome
未触发。
相同的脚本在Firefox
中完美运行。
我使用了ui.dropdown
,我试图绑定到更改事件。
这是我的脚本Dropdown.js
(function ($, undefined) {
$.widget("ui.Dropdown", {
options: {
defaultLabel: "Select...",
dontDisplay: false
},
_create: function _create() {
var self = this;
var element = self.element;
var options = self.options;
// Element is a select element
element.wrap("<div class='sc-dropdown'></div>");
var parent = options.parent = element.parent();
if (options.dontDisplay) {
parent.addClass("sc-incompleteDropdown");
return;
}
element.addClass("ui-helper-hidden-accessible");
var selectedValue = element.val() || "";
var list = $("<ul class='sc-dropdownOptions'></ul>");
// Generate dropdown using options in select
$("option", element).each(function (i, o) {
o = $(o);
var html = o.text();
var value = o.attr("value");
var label = o.data("label")
var desc = o.data("description");
if (value) {
list.append("<li data-label='" + label + "' data-value='" + value + "' class='sc-dropdownMainOption " + (selectedValue == value ? "sc-selected " : "") + (desc ? "sc-dropdown-hasDescription " : "") + "'>" + html + (desc ? "<div class='sc-dropdown-description'>" + desc + "</div>" : "") + "</li>");
}
});
var label = $(".sc-selected", list).data("label");
if (!label || label == "undefined") {
label = $(".sc-selected", list).html();
}
parent.append("<div class='sc-selectedDetail'>" + (label || options.defaultLabel) + "</div>");
parent.append(list);
parent.append("<div class='sc-graphics'></div>");
var isVisible = parent.css("display") != "none";
parent.css("display", "inline-block");
if (!isVisible) {
parent.hide();
}
$(document).bind("click", { self: self }, self._click);
$(parent).bind("change", { self: self }, self._change);
$(element).bind("focus", { self: self }, self._focus);
$(element).bind("blur", { self: self }, self._blur);
},
refresh: function refresh() {
var self = this;
var element = self.element;
var options = self.options;
if (options.dontDisplay) {
return;
}
var parent = options.parent;
var selectedValue = element.val() || "";
var list = $(".sc-dropdownOptions", parent);
list.empty();
$("option", element).each(function (i, o) {
o = $(o);
var html = o.html();
var value = o.attr("value");
var label = o.text();
list.append("<li data-label='" + label + "' data-value='" + value + "' class='sc-dropdownMainOption " + (selectedValue == value ? "sc-selected'" : "") + "'>" + html + "</li>");
});
$(".sc-selectedDetail", parent).html($(".sc-selected", list).data("label") || $(".sc-selected", list).html() || "");
},
disable: function disable() {
var self = this;
var element = self.element;
var options = self.options;
var parent = options.parent;
parent.addClass("sc-disabled");
element.attr("disabled", "disabled");
$(".sc-dropdownOptions", parent).slideUp();
},
enable: function enable() {
var self = this;
var element = self.element;
var options = self.options;
var parent = options.parent;
parent.removeClass("sc-disabled");
element.removeAttr("disabled");
},
_click: function _click(event) {
var self = event.data.self;
var element = self.element;
var options = self.options;
var parent = options.parent;
if (parent.is(".sc-disabled") || options.dontDisplay) {
return;
}
var target = $(event.target);
var list = $(".sc-dropdownOptions", parent);
if (target.parents(".sc-dropdown")[0] == parent[0]) {
if (target.is(".sc-selectedDetail") || target.parents(".sc-selectedDetail").length
|| target.is(".sc-graphics") || target.parents(".sc-graphics").length) {
if (list.is(":visible")) {
list.slideUp();
} else {
list.slideDown();
}
} else if (target.is("li:not(.sc-selected)") || target.parents("li:not(.sc-selected)").length) {
var item = target.is("li.sc-dropdownMainOption", parent) ? target : target.parents("li.sc-dropdownMainOption", parent);
element.val(item.data("value"));
$(".sc-selected", list).removeClass("sc-selected");
item.addClass("sc-selected");
$(".sc-selectedDetail", parent).html(item.data("label") || item.html());
list.slideUp();
element.change();
} else {
list.slideUp();
}
element.focus();
} else {
list.slideUp();
}
},
_change: function _change(event) {
var self = event.data.self;
var element = self.element;
var options = self.options;
var parent = options.parent;
if (options.dontDisplay) {
return;
}
var target = $(event.target);
var value = target.val();
var list = $(".sc-dropdownOptions", parent);
var item = $("li.sc-dropdownMainOption[data-value='" + value + "']", parent);
$(".sc-selected", list).removeClass("sc-selected");
item.addClass("sc-selected");
var label = item.data("label");
if (!label || label == "undefined") {
label = item.html();
}
$(".sc-selectedDetail", parent).html(label);
},
_focus: function _focus(event) {
var self = event.data.self;
var element = self.element;
var options = self.options;
var parent = options.parent;
parent.addClass("sc-focus");
},
_blur: function _blur(event) {
var self = event.data.self;
var element = self.element;
var options = self.options;
var parent = options.parent;
parent.removeClass("sc-focus");
}
});
}(jQuery));