我有一个 asp 下拉列表，它是由 ajax 生成的，现在我的问题是，我有一个 jquery，现在基本上这个 jquery 用于将下拉效果应用于任何选择元素，现在这样做是，一旦选择元素有一些选项，它隐藏那些选项并复制那些里面ul和li格式，现在发生了什么，在我的ajax调用之前，这个jquery被执行，并且因为它在select元素中没有找到任何东西，它不会创建ul和li，因此我总是变得空白列表，我尝试在 DropDownList 中放置静态项目，它可以工作，但是使用 jquery 它不起作用，我还尝试将整个 jquery 代码（为下拉列表添加幻灯片效果的 Jquery）放置在 ajax 调用函数下方的 document.ready 中，但是这也不起作用，下面是我的 ajax 函数：
function GetRegion() {
$("select[id$=ddlRegion] > option").remove();
$.ajax({
type: "POST",
url: "InteractiveMap.asmx/GetRegions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function (data) {
var Items = data.d;
ddlRegion.attr("disabled", false);
ddlCountry.append('<option value="-1">--Select Region--</option>');
$.each(Items, function (index, Item) {
ddlRegion.append('<option value="' + Item.RID + '">' + Item.Text + '</option>');
});
ddlRegion.val(RegionQueryString);
},
failure: function (msg) {
ShowErrorMessage(msg);
}
});
}
下面是我的jquery，它正在添加幻灯片效果，对不起，但它很大：
(function ($) {
$.fn.jNice = function (options) {
var self = this;
var safari = $.browser.safari; /* We need to check for safari to fix the input:text problem */
/* Apply document listener */
$(document).mousedown(checkExternalClick);
/* each form */
return this.each(function () {
$('input:submit, input:reset, input:button', this).each(ButtonAdd);
$('button').focus(function () { $(this).addClass('jNiceFocus') }).blur(function () { $(this).removeClass('jNiceFocus') });
$('input:text:visible, input:password', this).each(TextAdd);
/* If this is safari we need to add an extra class */
if (safari) { $('.jNiceInputWrapper').each(function () { $(this).addClass('jNiceSafari').find('input').css('width', $(this).width() + 11); }); }
$('input:checkbox', this).each(CheckAdd);
$('input:radio', this).each(RadioAdd);
$('select', this).each(function (index) {
//$(this).attr('size')
if ($(this).attr('multiple')) {
MultipleSelectAdd(this, index);
}
else
SelectAdd(this, index);
});
/* Add a new handler for the reset action */
$(this).bind('reset', function () { var action = function () { Reset(this); }; window.setTimeout(action, 10); });
$('.jNiceHidden').css({ opacity: 0 });
});
}; /* End the Plugin */
var Reset = function (form) {
var sel;
$('.jNiceWrapper select', form).each(function () { sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceSelectWrapper ul', $(this).parent()).each(function () { $('a:eq(0)', this).click(); }); });
$('.jNiceWrapper select', form).each(function () {
sel = (this.selectedIndex < 0) ? 0 : this.selectedIndex; $('.jNiceMultipleSelectWrapper ul li', $(this).parent()).each(function () {
if ($('a:first', this).hasClass('selected'))
$('a:first', this).click();
});
});
$('a.jNiceCheckbox, a.jNiceRadio', form).removeClass('jNiceChecked');
$('input:checkbox, input:radio', form).each(function () { if (this.checked) { $('a', $(this).parent()).addClass('jNiceChecked'); } });
};
var RadioAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jRadioWrapper jNiceWrapper"></span>');
var $wrapper = $input.parent();
var $a = $('<span class="jNiceRadio"></span>');
$wrapper.prepend($a);
/* Click Handler */
$a.click(function () {
var $input = $(this).addClass('jNiceChecked').siblings('input').attr('checked', true);
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
return false;
});
$input.click(function () {
if (this.checked) {
var $input = $(this).siblings('.jNiceRadio').addClass('jNiceChecked').end();
/* uncheck all others of same name */
$('input:radio[name="' + $input.attr('name') + '"]').not($input).each(function () {
$(this).attr('checked', false).siblings('.jNiceRadio').removeClass('jNiceChecked');
});
}
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $a.addClass('jNiceChecked'); }
};
var CheckAdd = function () {
var $input = $(this).addClass('jNiceHidden').wrap('<span class="jNiceWrapper"></span>');
var $wrapper = $input.parent().append('<span class="jNiceCheckbox"></span>');
/* Click Handler */
var $a = $wrapper.find('.jNiceCheckbox').click(function () {
var $a = $(this);
var input = $a.siblings('input')[0];
if (input.checked === true) {
input.checked = false;
$a.removeClass('jNiceChecked');
}
else {
input.checked = true;
$a.addClass('jNiceChecked');
}
return false;
});
$input.click(function () {
if (this.checked) { $a.addClass('jNiceChecked'); }
else { $a.removeClass('jNiceChecked'); }
}).focus(function () { $a.addClass('jNiceFocus'); }).blur(function () { $a.removeClass('jNiceFocus'); });
/* set the default state */
if (this.checked) { $('.jNiceCheckbox', $wrapper).addClass('jNiceChecked'); }
};
var TextAdd = function () {
var $input = $(this).addClass('jNiceInput').wrap('<div class="jNiceInputWrapper"><div class="jNiceInputInner"></div></div>');
var $wrapper = $input.parents('.jNiceInputWrapper');
$input.focus(function () {
$wrapper.addClass('jNiceInputWrapper_hover');
}).blur(function () {
$wrapper.removeClass('jNiceInputWrapper_hover');
});
};
var ButtonAdd = function () {
var value = $(this).attr('value');
$(this).replaceWith('<button id="' + this.id + '" name="' + this.name + '" type="' + this.type + '" class="' + this.className + '" value="' + value + '"><span><span>' + value + '</span></span>');
};
/* Hide all open selects */
var SelectHide = function () {
$('.jNiceSelectWrapper ul:visible').hide();
};
/* Check for an external click */
var checkExternalClick = function (event) {
if ($(event.target).parents('.jNiceSelectWrapper').length === 0) { SelectHide(); }
};
var SelectAdd = function (element, index) {
var $select = $(element);
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
SelectUpdate(element);
/* Apply the click handler to the Open */
$('div', $wrapper).click(function () {
var $ul = $(this).siblings('ul');
if ($ul.css('display') == 'none') { SelectHide(); } /* Check if box is already open to still allow toggle, but close all other selects */
$ul.slideToggle('fast');
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({ scrollTop: offSet });
return false;
});
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectAdd = function (element, index) {
var $select = $(element);
var size = parseInt($select.attr('size'));
index = index || $select.css('zIndex') * 1;
index = (index) ? index : 0;
/* First thing we do is Wrap it */
$select.wrap($('<div class="jNiceWrapper"></div>').css({ zIndex: 100 - index }));
var width = $select.width();
$select.addClass('jNiceHidden').after('<div class="jNiceMultipleSelectWrapper"><div><span class="jNiceSelectText"></span><span class="jNiceSelectOpen"></span></div><ul></ul></div>');
var $wrapper = $(element).siblings('.jNiceMultipleSelectWrapper').css({ width: width + 'px' });
$('.jNiceSelectText, .jNiceMultipleSelectWrapper ul', $wrapper).width(width - $('.jNiceSelectOpen', $wrapper).width());
//$('.jNiceMultipleSelectWrapper ul').height(($select.height()+4) +'px');
//$('.jNiceMultipleSelectWrapper ul').css({'overflow-x':'hidden','overflow-y':'auto'});
/* IF IE 6 */
if ($.browser.msie && jQuery.browser.version < 7) {
$select.after($('<iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" tabIndex="-1" frameborder="0"></iframe>').css({ height: $select.height() + 4 + 'px' }));
}
/* Now we add the options */
MultipleSelectUpdate(element);
/* Add the key listener */
$select.keydown(function (e) {
var selectedIndex = this.selectedIndex;
switch (e.keyCode) {
case 40: /* Down */
if (selectedIndex < this.options.length - 1) { selectedIndex += 1; }
break;
case 38: /* Up */
if (selectedIndex > 0) { selectedIndex -= 1; }
break;
default:
return;
break;
}
$('ul a', $wrapper).removeClass('selected').eq(selectedIndex).addClass('selected');
$('span:eq(0)', $wrapper).html($('option:eq(' + selectedIndex + ')', $select).attr('selected', 'selected').text());
return false;
}).focus(function () { $wrapper.addClass('jNiceFocus'); }).blur(function () { $wrapper.removeClass('jNiceFocus'); });
};
var MultipleSelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceMultipleSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().show();
$('option', $select).each(function (i) {
if ($('option:eq(' + i + ')', $select).attr('selected'))
$ul.append('<li><a href="#" index="' + i + '" class="selected">' + this.text + '</a></li>');
else
$ul.append('<li><a href="#" index="' + i + '">' + this.text + '</a></li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
//$('a.selected', $wrapper).removeClass('selected');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
//$select[0].selectedIndex = $(this).attr('index');
/// we make the select in the input also true
$('option:eq(' + $(this).attr('index') + ')', $select).attr('selected', true);
if ($(this).attr('index') == 0)
$('span:eq(0)', $wrapper).html($(this).html());
return false;
});
/* Set the defalut */
$('a:eq(0)', $ul).click();
};
var SelectUpdate = function (element) {
var $select = $(element);
var $wrapper = $select.siblings('.jNiceSelectWrapper');
var $ul = $wrapper.find('ul').find('li').remove().end().hide();
$('option', $select).each(function (i) {
$ul.append('<li><a href="#" index="' + i + '">' + this.text + '</a></li>');
});
/* Add click handler to the a */
$ul.find('a').click(function () {
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
/* Fire the onchange event */
//if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
if ($select[0].selectedIndex != $(this).attr('index')) {
$select.trigger('change');
}
$select[0].selectedIndex = $(this).attr('index');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
/* Set the defalut */
$('a:eq(' + $select[0].selectedIndex + ')', $ul).click();
};
var SelectRemove = function (element) {
var zIndex = $(element).siblings('.jNiceSelectWrapper').css('zIndex');
$(element).css({ zIndex: zIndex }).removeClass('jNiceHidden');
$(element).siblings('.jNiceSelectWrapper').remove();
};
/* Utilities */
$.jNice = {
SelectAdd: function (element, index) { SelectAdd(element, index); },
MultipleSelectAdd: function (element, index) { MultipleSelectAdd(element, index); },
MultipleSelectUpdate: function (element) { MultipleSelectUpdate(element); },
SelectRemove: function (element) { SelectRemove(element); },
SelectUpdate: function (element) { SelectUpdate(element); },
Reset: function (element) { Reset(element); }
}; /* End Utilities */
/* Automatically apply to any forms with class jNice */
$(function () { $('.content').jNice(); });
})(jQuery);