堆栈内存溢出
  简体   繁体   English

在弹出窗口中选择2 jquery插件？

[英]Select2 jquery plugin in popup?

 原文  2016-01-20 07:40:31  8   3    javascript/ jquery/ html

问题描述

I have two select tag implement select2 jquery plugin :我有两个select标签实现select2 jquery plugin ：

  • select tag normal: working fine, can search. select标签正常：工作正常，可以搜索。

  • select tag in popup: cant search.在弹出窗口中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>

Any helps.任何帮助。 Thanks.谢谢。

3 个解决方案

解决方案1
 1 已采纳  2016-01-20 08:02:17

I have two select tag implement select2 jquery plugin :我有两个select标记实现select2 jquery plugin ：

  • select tag normal: working fine, can search. select正常标签：工作正常，可以搜索。

  • select tag in popup: cant search.在弹出窗口中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>

Any helps.任何帮助。 Thanks.谢谢。

解决方案2
 0  2020-12-30 02:38:18

I have two select tag implement select2 jquery plugin :我有两个select标记实现select2 jquery plugin ：

  • select tag normal: working fine, can search. select正常标签：工作正常，可以搜索。

  • select tag in popup: cant search.在弹出窗口中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>

Any helps.任何帮助。 Thanks.谢谢。

解决方案3
 0  2021-11-15 15:55:32

From everyone who search an answer when you use select2 + SweetAlert2 extension.来自使用 select2 + SweetAlert2扩展时搜索答案的每个人。 The come around solution is to alter the style of the dropdown container, inside the event 'select2:open'.解决方案是在事件“select2:open”中改变下拉容器的样式。

$('select[name=extension]').on('select2:open', ()=>{
    $('.select2-container').css('z-index', 99999999);
})

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery Select2插件 - jQuery Select2 Plugin jQuery-Select2插件 - Jquery - Select2 Plugin jQuery Select2插件：重置 - jQuery Select2 plugin: reset Cypress 和 select2 jquery 插件 - Cypress and select2 jquery plugin 在Select2 jQuery插件中取消选择选择选项 - Deselecting select option in Select2 jquery plugin 多重选择字段（jQuery Select2插件） - Multiple select field (Jquery Select2 plugin) 使用display：none的jQuery select2插件 - jQuery select2 plugin using display:none 动态加载的div上的jQuery Select2插件 - jQuery Select2 plugin on dynamicaly loaded div jquery select2插件正则表达式允许的字符？ - jquery select2 plugin regex for allowed characters? 使用Ajax的jQuery Select2插件 - jQuery Select2 Plugin using Ajax
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM