Здравствуйте
Возникла проблема - несколько часов убил, до конца не смог решить, прошу помощи у знатоков) С jquery плотно раньше не сталкивался, сегодня первый раз, поэтому прошу быть снисходительными.
Задача была - есть два селекта, при выборе в одном значении, во второй динамически подгружаются данные. Когда это просто обычные селекты мне сделать удалось, в принципе легко. Но проблема в том, что в вёрстке для оформления использовался скрипт, и вот вместе с ним дружить не захотели(
Проблему в принципе понял - селект скрывался, а отображались дивы с таким оформлением, стал загружать данные в эти дивы, всё заработало, списки выпадают. Но во втором списке нельзя выбирать значения, они не нажимаются, похоже слетели обработчики, как поправить разобраться не смог... Пробовал bind() менять на live() думал, вдруг поможет, но не то...
Мой код:
<script type="text/javascript">
$(document).ready(function()
{
$("#datet").change(function()
{
var id=$(this).val();
var dataString = 'id='+ id;
var s=$(".jquery-selectbox-list").last();
var s2=$("#dateo");
$.ajax
({
type: "POST",
url: "/ajax_master2.php",
data: dataString,
cache: false,
success: function(html)
{
s2.html(html);
}
});
$.ajax
({
type: "POST",
url: "/ajax_master.php",
data: dataString,
cache: false,
success: function(html)
{
s.html(html);
}
});
});
});
</script>
<div class="block-5" style="padding-bottom: 200px;">
<div class="ns-select">
<select name="datet" class="select" id="datet">
<option value="0">--Выберите услугу--</option>
<option value='2'>маникюр</option>
<option value='1'>педикюр</option>
<option value='3'>стрижка</option>
<option value='4'>укладка</option>
</select>
</div>
<div class="ns-select">
<select name="dateo" class="select" id="dateo">
<option value="0">--Любой мастер--</option>
</select>
</div>
</div>
</div>
Вот что генерируется после выбора элемента из первого списка:
<div class="block-5" style="padding-bottom: 200px;">
<div class="ns-select">
<div class="jquery-selectbox jquery-custom-selectboxes-replaced" style="width: 139.12px;">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 134px; display: none;">
<span class="jquery-selectbox-item value-0 item-0">--Выберите услугу--</span>
<span class="jquery-selectbox-item value-2 item-1">маникюр</span>
<span class="jquery-selectbox-item value-1 item-2">педикюр</span>
<span class="jquery-selectbox-item value-3 item-3">стрижка</span>
<span class="jquery-selectbox-item value-4 item-4">укладка</span>
</div>
<span class="jquery-selectbox-currentItem">педикюр</span>
<select name="datet" class="select" id="datet" style="display: none;">
<option value="0">--Выберите услугу--</option>
<option value="2">маникюр</option>
<option value="1">педикюр</option>
<option value="3">стрижка</option>
<option value="4">укладка</option>
</select>
</div>
</div>
<div class="ns-select">
<div class="jquery-selectbox jquery-custom-selectboxes-replaced" style="width: 124.08px;">
<div class="jquery-selectbox-moreButton"></div>
<div class="jquery-selectbox-list jquery-custom-selectboxes-replaced-list" style="width: 119px; display: none;">
<span class="jquery-selectbox-item value-0 item-0">--Любой мастер--</span>
<span class="jquery-selectbox-item value-1 item-1">Иван Иванов</span>
<span class="jquery-selectbox-item value-2 item-2">Петр Петров</span>
</div>
<span class="jquery-selectbox-currentItem">--Любой мастер--</span>
<select name="dateo" class="select" id="dateo" style="display: none;">
<option value="0">--Любой мастер--</option>
<option value="1">Иван Иванов</option>
<option value="2">Петр Петров</option>
</select>
</div>
</div>
</div>
А вот код файла для применения стилей нестандартного оформления селектов:
jQuery.fn.selectbox = function(options){
/* Default settings */
var settings = {
className: 'jquery-selectbox',
/* animationSpeed: "normal",*/
animationSpeed: "fast",
listboxMaxSize: 10,
replaceInvisible: false
};
var commonClass = 'jquery-custom-selectboxes-replaced';
var listOpen = false;
var showList = function(listObj) {
var selectbox = listObj.parents('.' + settings.className + '');
listObj.slideDown(settings.animationSpeed, function(){
listOpen = true;
});
selectbox.addClass('selecthover');
jQuery(document).bind('click', onBlurList);
return listObj;
}
var hideList = function(listObj) {
var selectbox = listObj.parents('.' + settings.className + '');
listObj.slideUp(settings.animationSpeed, function(){
listOpen = false;
jQuery(this).parents('.' + settings.className + '').removeClass('selecthover');
});
jQuery(document).unbind('click', onBlurList);
return listObj;
}
var onBlurList = function(e) {
var trgt = e.target;
var currentListElements = jQuery('.' + settings.className + '-list:visible').parent().find('*').andSelf();
if(jQuery.inArray(trgt, currentListElements)<0 && listOpen) {
hideList( jQuery('.' + commonClass + '-list') );
}
return false;
}
/* Processing settings */
settings = jQuery.extend(settings, options || {});
/* Wrapping all passed elements */
return this.each(function() {
var _this = jQuery(this);
if(_this.filter(':visible').length == 0 && !settings.replaceInvisible)
return;
var replacement = jQuery(
'<div class="' + settings.className + ' ' + commonClass + '">' +
'<div class="' + settings.className + '-moreButton" />' +
'<div class="' + settings.className + '-list ' + commonClass + '-list" />' +
'<span class="' + settings.className + '-currentItem" />' +
'</div>'
);
jQuery('option', _this).each(function(k,v){
var v = jQuery(v);
var listElement = jQuery('<span class="' + settings.className + '-item value-'+v.val()+' item-'+k+'">' + v.text() + '</span>');
listElement.click(function(){
var thisListElement = jQuery(this);
var thisReplacment = thisListElement.parents('.'+settings.className);
var thisIndex = thisListElement[0].className.split(' ');
for( k1 in thisIndex ) {
if(/^item-[0-9]+$/.test(thisIndex[k1])) {
thisIndex = parseInt(thisIndex[k1].replace('item-',''), 10);
break;
}
};
var thisValue = thisListElement[0].className.split(' ');
for( k1 in thisValue ) {
if(/^value-.+$/.test(thisValue[k1])) {
thisValue = thisValue[k1].replace('value-','');
break;
}
};
thisReplacment
.find('.' + settings.className + '-currentItem')
.text(thisListElement.text());
thisReplacment
.find('select')
.val(thisValue)
.triggerHandler('change');
var thisSublist = thisReplacment.find('.' + settings.className + '-list');
if(thisSublist.filter(":visible").length > 0) {
hideList( thisSublist );
}else{
showList( thisSublist );
}
}).bind('mouseenter',function(){
jQuery(this).addClass('listelementhover');
}).bind('mouseleave',function(){
jQuery(this).removeClass('listelementhover');
});
jQuery('.' + settings.className + '-list', replacement).append(listElement);
if(v.filter(':selected').length > 0) {
jQuery('.'+settings.className + '-currentItem', replacement).text(v.text());
}
});
replacement.find('.' + settings.className + '-moreButton').click(function(){
var thisMoreButton = jQuery(this);
var otherLists = jQuery('.' + settings.className + '-list')
.not(thisMoreButton.siblings('.' + settings.className + '-list'));
hideList( otherLists );
var thisList = thisMoreButton.siblings('.' + settings.className + '-list');
if(thisList.filter(":visible").length > 0) {
hideList( thisList );
}else{
showList( thisList );
}
}).bind('mouseenter',function(){
jQuery(this).addClass('morebuttonhover');
}).bind('mouseleave',function(){
jQuery(this).removeClass('morebuttonhover');
});
_this.hide().replaceWith(replacement).appendTo(replacement);
var thisListBox = replacement.find('.' + settings.className + '-list');
var thisListBoxSize = thisListBox.find('.' + settings.className + '-item').length;
if(thisListBoxSize > settings.listboxMaxSize)
thisListBoxSize = settings.listboxMaxSize;
if(thisListBoxSize == 0)
thisListBoxSize = 1;
var thisListBoxWidth = Math.round(_this.width() + 5);
if(jQuery.browser.safari)
thisListBoxWidth = thisListBoxWidth * 0.94;
replacement.css('width', thisListBoxWidth + 'px');
thisListBox.css({
width: Math.round(thisListBoxWidth-5) + 'px'
});
});
}
jQuery.fn.unselectbox = function(){
var commonClass = 'jquery-custom-selectboxes-replaced';
return this.each(function() {
var selectToRemove = jQuery(this).filter('.' + commonClass);
selectToRemove.replaceWith(selectToRemove.find('select').show());
});
}
$(document).ready(function() {
// Custom select
$('.select').selectbox();
});
Понимаю, что вопрос объемный, буду рад любой помощи)
