Select2 jQuery插件弹出？

我有两个select标签实现select2 jquery plugin：Select2 jQuery插件弹出？

select标签正常：做工精细，可以搜索。
select在弹出窗口中的标记：无法搜索。

<head> 
 
    <link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/select2/select2.min.css"> 
 
    <link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/dist/css/AdminLTE.min.css"> 
 
    <script src='https://almsaeedstudio.com/js/bootstrap.min.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/dist/js/demo.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/plugins/select2/select2.full.min.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/dist/js/app.min.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/bootstrap/js/bootstrap.min.js'></script> 
 
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 
 
</head> 
 
<body> 
 
<div> 
 
    <select id="categoryID" onchange="changeCategory(this)" class="form-control select2" style="width: 100%"> 
 
     <option id="1">Games</option> 
 
     <option id="2">Sport</option> 
 
     <option id="3">Sport Games</option> 
 
    </select> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/dist/js/demo.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/plugins/select2/select2.full.min.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/dist/js/app.min.js'></script> 
 
    <script src='https://almsaeedstudio.com/themes/AdminLTE/bootstrap/js/bootstrap.min.js'></script> 
 

 
    <button class="btn btn-block btn-primary" data-toggle="modal" 
 
      data-target="#addNewCategoryModal">New 
 
    </button> 
 
    <div class="modal fade" id="addNewCategoryModal" tabindex="-1" role="dialog"> 
 
     <div class="modal-dialog" role="document"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
 
          aria-hidden="true">&times;</span> 
 
        </button> 
 
        <h4 class="modal-title" id="titleLabel">New Category</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <div class="form-group"> 
 
         <select id="categoryID" onchange="changeCategory(this)" class="form-control select2" style="width: 100%"> 
 
          <option id="1">Games</option> 
 
          <option id="2">Sport</option> 
 
          <option id="3">Sport Games</option> 
 
         </select> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
     function initialSelect() { 
 
      $(".select2").select2(); 
 
     } 
 
     $(function() { 
 
      //Initialize Select2 Elements 
 
      $(".select2").select2(); 
 
     }); 
 
     $('#addNewCategoryModal').on('show.bs.modal', function (event) { 
 
      var modal = $(this) 
 
      modal.find('.modal-body #categoryID').select2(); 
 
      modal.find('.modal-body categoryID').select2(); 
 
      modal.find('.select2').select2(); 
 
      $(".select2").select2(); 
 
     }) 
 
    </script> 
 

 
</div> 
 
</body>

任何帮助。谢谢。

来源

2016-01-20 rome 웃

您已经给出了模式的tabindex="-1"。由于这个输入没有得到关注。从你的代码中删除tabindex，它应该工作。

而且还有以下问题在你的代码

你已经包括引导和选择2 JS文件多次的HTML。只包括一次。
在包含引导程序js文件之前包含您的jquery文件。
您多次使用categoryID您的HTML页面。 ID必须是唯一的。

来源

2016-01-20 08:02:17

非常感谢。 –

Select2 jQuery插件弹出？

回答

相关问题