Question

我一直在尝试使用SelectBoxIt Jquery插件，但是我遇到了动态创建的选择框的显示和禁用属性的问题。简而言之，如果原始选择框具有“display：none”css属性，则SelectBoxIt仍会显示它。我通过在隐藏的容器div中插入选择框来解决这个问题。但是，当显示容器div时，selectboxit会正确显示，但现在已禁用。你们有任何关于如何解决这个问题的线索吗？

HTML CODE：

<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 CODE：

<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();

jQuery SelectBoxIt插件的显示属性问题

1 个答案: