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

Question

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

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

Для начала вам понадобится элемент <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(); для удаления DIV, которые он создал для предыдущей опции `,Надеюсь, я достаточно ясен.

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

$('select').resetSS();

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

вам нужно вызвать функцию 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 5

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