Javascript 使用模式滚动选择2引导模式
更新: 我补充说:Javascript 使用模式滚动选择2引导模式,javascript,jquery,twitter-bootstrap,bootstrap-modal,jquery-select2,Javascript,Jquery,Twitter Bootstrap,Bootstrap Modal,Jquery Select2,更新: 我补充说: $("#id_project").select2({dropdownParent: $(".modal-body")}); …这会使下拉列表正确放置,并且可以在中键入搜索。不幸的是…这会导致传递的数据被清除,并且没有可供选择的选项 我有一个在引导模式中填充的表单,如下所示: <div class="modal fade show" id="modal-task" style="display: block;"> <div class="modal-di
$("#id_project").select2({dropdownParent: $(".modal-body")});
…这会使下拉列表正确放置,并且可以在中键入搜索。不幸的是…这会导致传递的数据被清除,并且没有可供选择的选项
我有一个在引导模式中填充的表单,如下所示:
<div class="modal fade show" id="modal-task" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<form method="post" action="/dataanalytics/sparc/tasks/create/" class="js-task-create-form">
<input type="hidden" name="csrfmiddlewaretoken" value="W6cnRq9zPDvUdQOpqceXPVulbWJAMFazRStzwnZhLi8UEqa87SYiRKmMoHAKwmvb">
<div class="modal-body">
<div class="form-group">
<select name="project" data-minimum-input-length="2" class="form-control select2-hidden-accessible" required="" id="id_project" data-autocomplete-light-url="/dataanalytics/projectautocomplete/" data-autocomplete-light-function="select2" tabindex="-1" aria-hidden="true">
<option value="" selected="">---------</option>
</select>
<span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: 505.091px;">
<span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_project-container">
<span class="select2-selection__rendered" id="select2-id_project-container">
<span class="select2-selection__placeholder">
</span>
</span>
<span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true">
</span>
</span>
</div>
<div class="form-group">
<select name="dataSources" data-minimum-input-length="2" class="form-control select2-hidden-accessible" id="id_dataSources" data-autocomplete-light-url="/dataanalytics/datasourceautocomplete/" data-autocomplete-light-function="select2" multiple="" tabindex="-1" aria-hidden="true">
</select>
<span class="select2 select2-container select2-container--bootstrap" dir="ltr" style="width: 505.091px;">
<span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1">
<ul class="select2-selection__rendered">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="" style="width: 0.75em;">
</li>
</ul>
</span>
</span>
<span class="dropdown-wrapper" aria-hidden="true">
</span>
</span>
</div>
</div>
</form>
</div>
</div>
版本:
- jQuery:1.12.1
- 选择2:4.0.5
- 引导:4
dropdownParent
:
$.fn.select2.defaults.set("dropdownParent", $('#modal-task'));
这允许键入搜索输入。但是,我的模式足够长,需要滚动。如果模式滚动到原始位置之外,单击Select2框会导致选项和搜索输入显示在模式顶部框的上方。这是有道理的,因为所有Select2框都是通过dropdownParent
绑定到模式本身的
如何防止这种行为并强制Select2选项和搜索输入正常显示(直接位于Select2上方或下方,具体取决于它相对于窗口边缘的位置)?此外,即使在未激活模式的情况下,我也会在页面上显示Select2框,因此以这种方式影响所有Select2框并不理想
更新:我尝试将其他代码替换为此行:
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
这与什么都不做的效果相同:搜索输入在Firefox中不起作用,但下拉列表的位置正确
更新2:我尝试了以下方法:
$('#id_project').set("dropdownParent", $('#id_project'));
这导致下拉列表不出现在任何地方,选项也不存在(替换为-----------
)
更新3:我试过这个
$('#modal-task').css('overflow','visible');
…这导致搜索输入工作…但模式滚动现在已中断。此外,下拉列表在Select2框的左边缘稍微错位。这对我来说很好
$(document).ready(function () {
$('select.select2:not(.normal)').each(function () {
$(this).select2({
dropdownParent: $(this).parent().parent()
});
});
});
我快迟到了,我可以帮别人。如果模态上有tabindex=-1,则可能无法键入。尝试移除它。这也许是答案,但你至少应该解释一下它为什么有效。
$(document).ready(function () {
$('select.select2:not(.normal)').each(function () {
$(this).select2({
dropdownParent: $(this).parent().parent()
});
});
});