Visual Glitch使用带有引导选项卡的Chosen中的动态数据

时间:2012-10-15 16:38:56

标签: jquery css twitter-bootstrap jquery-chosen

使用bootstrap版本2.1.1 使用上次选择的

当选中的内容在标签内容中重新编写时,我正在尝试一个视觉故障,在标签内容div和滚动条内创建一个空白区域。

Jquery代码

$('.chzn-select').chosen();
    <?php if(!empty($data_which_depends_the _chosen)){ ?>
     $.ajax({
        url: '<?php echo(site_url("/url_to_get_the_data/")); ?>',
        dataType: 'json',
        type: 'POST',
        data: {
            l: <?php echo($data_which_depends_the _chosen); ?>,
            <?php echo $this->security->get_csrf_token_name()?>: '<?php echo $this->security->get_csrf_hash()?>'
        },
        success: setChosenOptions
    });
    <?php } ?>

...

var setChosenOptions = function(data)
{
    $("select[name='numChosen[]']").children().remove();
    if(data !== null)
    {
        $.each(data.data, function(i,item){
            <?php if(!$readOnly){ ?>
            $("select[name='numChosen[]']").append('<option value="' + item.ids + '">' + item.number + '</option>');
            <?php }else{ ?>
            $("select[name='numChosen[]']").append('<option disabled="disabled" value="' + item.ids + '">' + item.number + '</option>');
            <?php } ?>
        });
        $.ajax({
            url: '<?php echo(site_url("/url_to_get_other_data/")); ?>',
            dataType: 'json',
            type: 'POST',
            data: {
                l: '<?php echo($data_which_depends_the _chosen); ?>',
                <?php echo $this->security->get_csrf_token_name()?>: '<?php echo $this->security->get_csrf_hash()?>'
            },
            success: function(data){
                if(data !== null)
                {
                    $.each(data.data, function(i,item){
                        if($("select[name='numChosen[]']").find("option[value=" + item.ids + "]").length)
                            $("select[name='numChosen[]']").find("option[value=" + item.ids + "]").attr('selected','selected');
                        else
                            $("select[name='numChosen[]']").append('<option selected="selected" disabled="disabled" value="' + item.ids + '">' + item.number + '</option>');
                    });
                }
                $("select[name='numChosen[]']").trigger("liszt:updated");
            }
        });                 
    }
}

调用$("select[name='numChosen[]']").trigger("liszt:updated");时出现所有问题,这就是它的外观:

enter image description here

问题是:任何想法如何解决?

1 个答案:

答案 0 :(得分:2)

只需将style="overflow: visible;"添加到<div class="tab-content" style="overflow: visible;">并解决问题:D