JQuery SelectBoxIt插件的显示属性问题

Question

我一直在尝试使用SelectBoxIt Jquery插件，但是在动态创建的选择框的display和disabled属性上遇到了问题。简而言之，如果原始选择框有一个"display:none“css属性，SelectBoxIt仍然会显示它。我通过在隐藏的容器div中插入选择框绕过了这个问题。然而，当容器div被显示时，selectboxit被正确显示，但现在被禁用。你们有什么办法解决这个问题吗？

HTML代码：

<div>
<select name="sel" id="sel">
<option value="0">Select this</option>
<option value="1">Select that</option>
</select>
</div>

<div id="seladd_xx" style="display:none">
<select name="seladd[]" id="sel_xx">
<option value="0">Select this now</option>
<option value="1">Select that now</option>
</select>
</div>    
<button type="button" id="addbtn_unit" class="addmore" style="font-weight: bold;font-size:11px">Add More</button>    

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.2.0/jquery.selectBoxIt.min.js">        </script>

JQUERY代码：

<script type="text/javascript">
$(document).ready(function(){
    $("select").selectBoxIt();
    id=0;
    $('.addmore').click(function(){
        newUnit($('#seladd_xx'));
    })

    function newUnit(element) {
        var newElement = element.clone(true);
        if(id <10)id = "0"+id;
        newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
        $('select', newElement).each(function() {
            var yyid = $(this).attr("id").split("_")[0] + '_' + id;
            $(this).attr('id', yyid);
        });
        $('#seladd_xx').before(newElement);
        newElement.show('fast');
        id++;
    }
})

</script>

Answer 1

更新您的jQuery选择器，以不对隐藏的选择框调用SelectBoxIt。如下所示：

$('select:visible').selectBoxIt();