Плагин Stylish-Select jQuery не работает с элементами, созданными после загрузки страницы.

Question

Я стремился использовать Stylish Select Box с элементами, созданными после загрузки страницы без успеха. Чтобы понять проблему, вам сначала нужно произвести ее повторное производство. Я знаю, что следующее может показаться немного раздражающим, но, пожалуйста, продолжайте читать, если у вас есть 5 минут свободного времени.

В качестве альтернативы вы можете получить заполненный пример here, чтобы увидеть проблему напрямую.

Во-первых, вам понадобится элемент <select>. Теперь привяжите jquery.stylish-select.js к элементу <select>, используя что-то вроде $('select').sSelect();, после чего скрипт скрывает элемент <select> и создает под ним набор DIV. Теперь ваша страница должна выглядеть следующим образом:

<select style="display:none;"> 
    <option>1</option> 
    <option>2</option> 
</select> 
<div class=newListSelected> 
    <!-- Some other stuff(not important). --> 
</div> 

Теперь добавьте еще один <select> элемента на ту же страницу с чем-то вроде $('body').append('<select><option>1</option><option>2</option></select>')​ и использовать $(.newListSelected).remove(); для удаления DIVs она создана для проницаемого `варианта. Надеюсь, я достаточно ясно.

После этого вы должны иметь следующие на странице:

<select style="display:none;"> 
    <option>1</option> 
    <option>2</option> 
</select> 
<select> 
    <option>1</option> 
    <option>2</option> 
</select> 

Последний, просто позвоните $('select').sSelect(); еще раз. Он должен создать DIV под как ваших <select> элементов. Теперь вот в чем проблема: first select box, представленный DIVs, не ведет себя правильно.

В качестве альтернативы вы можете получить заполненный пример here, чтобы увидеть проблему напрямую.

Обычно, когда вы выбираете опцию из выбора коробки, представленных дивами, он должен обновить selectedIndex DOM (свойство) исходный <select> элемента к соответствующему индексу выбранного варианта (0 для первого варианта, 1 для второй .. и т.п). Но если вы посмотрите внимательно, вы увидите, что его значение selectedIndex равно -1 для любой опции.

Поскольку я действительно новичок в Javascript, я действительно не знаю, почему это так. Вероятно, я мог подумать только о том, что первый элемент привязан к $('select').sSelect; дважды, что вызывает проблемы DOM.

Answer 1

Я думаю, вы не можете просто удалить div. почему вы не можете отменить действие sSelect? Я уверен, что есть уничтожить вариант или удалить или любой другой, поэтому удалите sSelect правильно, попробуйте еще раз :)

Answer 2

у вас вызвать функцию sSelect еще раз после создания элементов

$(document).ready(function(){ 
    $('select').sSelect(); 
}); 

$('.add').click(function() { 
    $('body').append('<select><option>1</option><option>2</option></select>') 
    $('select').sSelect(); 
}); 

$('.bind').click(function() { 
    $('.newListSelected').remove(); 
    $('select').sSelect(); 
}); 

Answer 3

Здесь является то, что ваш JS должен выглядеть следующим образом:

$(document).ready(function() { 
    $('select').sSelect(); 

    $('.add').click(function() { 
     var newSelect =$('<select><option>1</option><option>2</option></select>').appendTo('body'); 
     $(newSelect).sSelect(); 
    }); 

    $('.bind').click(function() { 
     $('.newListSelected').remove(); 
    }); 
});​ 

хитрость заключается в том, чтобы использовать appendTo вместо append. Это вернет вновь созданный select, так что вы можете использовать .sSelect() на нем.

Answer 4

сброса Стильного Выбор функция Функция

$('select').resetSS(); 

Answer 5

использования resetSS() после того, как манипулируя ваши выбора опций.

$('#sel2').sSelect(); 

function refresh_select(id){ 
    $.getJSON("/ajax.php?cat="+id, function(data){ 
     $("select#sel2").loadSelect(data);  
     $("select#sel2").resetSS(); 
    }); 
});