Question

我一直在努力将Stylish Select Box用于页面加载后创建的元素，但没有成功。为了理解这个问题，您需要先重新制作它。我知道以下看起来有点烦人但如果你有5分钟的业余时间，请继续阅读。

或者，您可以获得已完成的示例here以直接查看问题。

首先，您需要一个<select>元素。现在使用类似<select>的内容将jquery.stylish-select.js绑定到$('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();。它应该在<select>元素的下创建DIV。现在问题在于，由DIV表示的第一个选择框行为不正常。

或者，您可以获得已完成的示例here以直接查看问题。

正常当您从DIV表示的选择框中选择一个选项时，它应该将原始<select>元素的selectedIndex（DOM属性）更新为相应的索引选择的选项（第一个选项为0，第二个选项为1等）。但是如果你仔细观察，你会发现它的selectedIndex值在-1变为-1。

由于我是Javascript的新手，我真的不知道为什么它的表现如此。我只能想到的可能是由于第一个元素被绑定到$('select').sSelect;两次，从而导致DOM问题。

Answer 1

这就是你的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 2

重置时尚选择功能

$('select').resetSS();

Answer 3

操作选择选项后使用resetSS（）函数。

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

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

Answer 4

我认为你不能简单地删除div。为什么你不能撤消sSelect的东西？我确定有一个销毁选项或删除或其他什么，所以正确删除sSelect，然后再试一次:)

Answer 5

创建元素后，你必须再次调用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();
});

jQuery Stylish-Select插件不适用于页面加载后创建的元素

5 个答案: