在弹出选择2 jQuery插件？ [英] Select2 jquery plugin in popup?
本文介绍了在弹出选择2 jQuery插件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个 select 标记实现 select2 jquery插件：
select 标记正常：正常工作，可以搜索。在弹出窗口中选择标记：无法搜索。
< HEAD> < link rel =stylesheethref =https://almsaeedstudio.com/themes/AdminLTE/plugins/select2/select2.min.css> < link rel =stylesheethref =https://almsaeedstudio.com/themes/AdminLTE/bootstrap/css/bootstrap.min.css> < link rel =stylesheethref =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 =categoryIDonchange =changeCategory（this）class =form-control select2style =width：100％> < option id =1>游戏< / option> < option id =2> Sport< / option> < option id =3> Sport Games< / option> < /选择> < 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-primarydata-toggle =modaldata-target =＃addNewCategoryModal>新建< / button> < div class =modal fadeid =addNewCategoryModaltabindex = - 1role =dialog> < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =titleLabel>新分类< / h4> < / DIV> < div class =modal-body> < div class =form-group> < select id =categoryIDonchange =changeCategory（this）class =form-control select2style =width：100％> < option id =1>游戏< / option> < option id =2> Sport< / option> < option id =3> Sport Games< / option> < /选择> < / DIV> < / DIV> < / DIV> < / DIV> < / DIV> < script type =text / javascript>函数initialSelect（）{$（。select2）。select2（）; }（function（）{//初始化Select2元素$（。select2）。select2（）;}）; $（'＃addNewCategoryModal'）。on（'show.bs.modal'，function（event）{var modal = $（this）modal.find（'。modal-body #categoryID'）。select2（）; modal。 find2（）; select2（）;}）< / script>< find（'。modal-body categoryID'）。 / div>>< / body>
谢谢。
解决方案
您已将 tabindex = - 1模态。由于这个输入没有得到关注。
此外，您的代码中还存在以下问题：
categoryID 多次HTML页面。 ID必须是唯一的。
I have two select tag implement select2 jquery plugin:
selecttag normal: working fine, can search.selecttag in popup: cant search.
<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">×</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.
解决方案
You have given tabindex="-1" for the modal. Because of this input is not getting focussed. Remove tabindex from your code and it should work.
Also there are following issues in your code
- you have included bootstrap and select2 js files multiple times your HTML. Include only once.
- Include your jquery file before including bootstrap js file.
- You are using
categoryIDmultiple times your HTML page. IDs has to be unique.
这篇关于在弹出选择2 jQuery插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
