0

我一直在尝试使用 SelectBoxIt Jquery 插件，但是动态创建的选择框的显示和禁用属性存在问题。简而言之，如果原来的选择框有一个“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>

查询代码：

<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>
4

1 回答 1

0

更新您的 jQuery 选择器以不在隐藏的选择框上调用 SelectBoxIt。像这样：

$('select:visible').selectBoxIt();
于 2013-03-25T20:52:22.833 回答