1
スタイリングを可能にするために選択ボックスからHTML要素を作成する関数があります。ここでは、コードです:子要素のIDを取得して親に追加する
$.fn.jqTransSelect = function() {
return this.each(function (index) {
var $select = $(this);
if ($select.hasClass('jqTransformHidden')) {
return;
}
if ($select.attr('multiple')) {
return;
}
var oLabel = jqTransformGetLabel($select);
var $wrapper = $select.addClass('jqTransformHidden').wrap('<div class="jqTransformSelectWrapper"></div>').parent().css({
zIndex: 10 - index
});
$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>');
var $ul = $('ul', $wrapper).css('width', $select.width() + 10).hide();
$('option', this).each(function (i) {
var oLi = $('<li><a href="#" index="' + i + '">' + $(this).html() + '</a></li>');
$ul.append(oLi);
});
$ul.find('a').click(function() {
$('a.selected', $wrapper).removeClass('selected');
$(this).addClass('selected');
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');
$('span:eq(0)', $wrapper).html($(this).html());
$ul.hide();
return false;
});
$('a:eq(' + this.selectedIndex + ')', $ul).click();
$('span:first', $wrapper).click(function() {
$("a.jqTransformSelectOpen", $wrapper).trigger('click');
});
oLabel && oLabel.click(function() {
$("a.jqTransformSelectOpen", $wrapper).trigger('click');
});
this.oLabel = oLabel;
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper).click(function() {
if ($ul.css('display') == 'none') {
jqTransformHideSelect();
}
if ($select.attr('disabled')) {
return false;
}
$ul.slideToggle('fast', function() {
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
$ul.animate({
scrollTop: offSet
});
});
return false;
});
var iSelectWidth = $select.outerWidth() + 15;
var oSpan = $('span:first', $wrapper);
var newWidth = (iSelectWidth > oSpan.innerWidth()) ? iSelectWidth + oLinkOpen.outerWidth() : $wrapper.width();
$wrapper.css('width', newWidth);
$ul.css('width', newWidth - 7);
oSpan.css({
width: iSelectWidth
});
$ul.css({
display: 'block',
visibility: 'hidden'
});
var iSelectHeight = ($('li', $ul).length) * ($('li:first', $ul).height());
(iSelectHeight < $ul.height()) && $ul.css({
height: iSelectHeight,
'overflow': 'hidden'
});
$ul.css({
display: 'none',
visibility: 'visible'
});
});
};
私は、彼らが隠されている前に、元のセレクトボックスのIDを取り、新しく作成された$ラッパーに彼らにお尻のクラスを追加されてやりたいと思っている - 私はこれを行うだろうか?
おかげで、 クリス
ありがとうございました! –