Select2 在嵌入引导模式时不起作用
[英] Select2 doesn't work when embedded in a bootstrap modal
本文介绍了Select2 在嵌入引导模式时不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我在引导模式中使用 select2(输入)时，我无法在其中输入任何内容.好像是残疾人?在模态 select2 之外工作正常.
工作示例:http://jsfiddle.net/byJy8/1/代码:
<div id="myModal";class="模态隐藏淡入淡出";tabindex="-1";角色=对话"aria-labelledby="myModalLabel";咏叹调隐藏=真"><div class="modal-header"><按钮类型=按钮"类=关闭"数据关闭=模态"aria-hidden="true">×</button><h3 id="myModalLabel">面板</h3>
<div class="modal-body";样式=最大高度:800px"><form class="form-horizontal"><!-- 文本输入--><div class="control-group"><label class="control-label";for=vdn_number">Numer</label><div class="controls"><!-- select2 --><输入名称=vdn_number";类型=隐藏"id=vdn_number"类=输入大"必需="/>
</表单>
<div class="modal-footer"><button class="btn";数据关闭=模态"aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button>
JS
$("#vdn_number").select2({占位符:00000"，最小输入长度:2，阿贾克斯:{网址:getAjaxData/"，数据类型:'json'，类型:POST"，数据:功能(术语，页面){返回 {q: term,//搜索词上校:'vdn'};},results: function (data) {//将结果解析为 Select2 期望的格式.//因为我们使用自定义格式化函数，所以我们不需要更改远程 JSON 数据返回{结果:数据}；}}});
答案:
在这里您可以快速找到修复
这里是正确的方法":Select2 在嵌入引导模式时不起作用
解决方案
好的，我已经开始工作了.
改变
<div class="modal-header"><按钮类型=按钮"类=关闭"数据关闭=模态"aria-hidden="true">×</button><h3 id="myModalLabel">面板</h3>
<div class="modal-body";样式=最大高度:800px">
到
<div class="modal-header"><按钮类型=按钮"类=关闭"数据关闭=模态"aria-hidden="true">×</button><h3 id="myModalLabel">面板</h3>
<div class="modal-body";样式=最大高度:800px">
(从模态中删除 tabindex=-1")
When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine.
Working example: http://jsfiddle.net/byJy8/1/
code:
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<form class="form-horizontal">
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="vdn_number">Numer</label>
<div class="controls">
<!-- seleect2 -->
<input name="vdn_number" type="hidden" id="vdn_number" class="input-large" required="" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
JS
$("#vdn_number").select2({
placeholder: "00000",
minimumInputLength: 2,
ajax: {
url: "getAjaxData/",
dataType: 'json',
type: "POST",
data: function (term, page) {
return {
q: term, // search term
col: 'vdn'
};
},
results: function (data) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return {results: data};
}
}
});
answers:
here you can find a quick fix
and here is 'the right way': Select2 doesn't work when embedded in a bootstrap modal
解决方案
Ok, I've got it to work.
change
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
to
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
(remove tabindex="-1" from modal)
这篇关于Select2 在嵌入引导模式时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
