select2下拉列表在bootstrap模式上显得凌乱

Question

HTML代码 -

<div class="block">
    <label class="control-label-required">Deposit to account </label><br />
    <select id="receipt_voucher_to_account_id" name="receipt_voucher[to_account_id]">
    <option value="1">sbi</option>
    <option value="2">cash in hand</option>
    <option value="3">Loan and advances</option>
    <option value="4">HDFC Bank acc</option>
    </select>
</div>

Jquery代码 -

<script type="text/javascript">
    $(document).ready(function(){
      $("#receipt_voucher_to_account_id").select2();
      $("#receipt_voucher_to_account_id").removeAttr('tabindex');
    });
</script>

输出 -

下拉列表在引导模式中没有正确显示。我找到了一个要求我删除属性tabindex的解决方案，我遵循这个但仍然遇到同样的问题。任何伙伴都可以帮助我。谢谢！！

Answer 1

  

Select2是基于jQuery的选择框替代品。它支持   搜索，远程数据集和无限滚动结果。

http://ivaynberg.github.io/select2/

看起来这个插件正在干扰正常的引导程序。

如果您注释掉$("#receipt_voucher_to_account_id").select2();并重新加载页面会怎样？

您是否检查过FireFox / Chrome控制台是否存在任何与css / js相关的错误？