代码：

Question

无法输入Select2下拉输入搜索字段（http://kevin-brown.com/select2/）

我发现列出的许多问题提到了同样的问题，但对我来说没有任何问题（https://www.google.com/search?q=can%27t+type+in+select2&ie=utf-8&oe=utf-8&client=firefox-b-ab）。我无法使用jQuery在模型对话框中键入Select2下拉输入搜索字段。顺便说一下，我可以从下拉菜单中选择价值。尝试插入tabindex：0但没有运气。

代码：

$.ajax({
    type: "POST",
    url: "<?php echo $myScripts; ?>",
    data: { id1: "get-release-dropdown-html", id100: "<?php echo $dbTable; ?>" },
    success:function(releaseDropdown){

        $('#progress').hide();

        $( "#modelDialog1" ).dialog({
            modal: true,
            width: '570',
            height: '600',
            resizable: true,
            position:
            {
                my: "center",
                at: "center",
                of: window,
             },
            title: "Trigger Build",
            open: function() {

                $(this).html("<br/>Please select job options.<br/><br/><br/><b>Release:</b>" + releaseDropdown + "<div style='margin-top:30px;'/><b>Build Release Candidate:</b><select id='sReleaseCandidate'><option value='ga' selected>GA</option><option value='beta1'>BETAX</option>'></br>");

                $("#sDescription").focus();

                $("#sRelease, #sReleaseCandidate").select2({
                    tags: true
                });
            },

            close: function() {
                $( this ).dialog( "close" );

            },

        });

    }

});

Answer 1

如https://github.com/select2/select2/issues/600#issuecomment-102857595

所示

您需要将模态对话框元素指定为select2的父对象，即使您单击了select元素，也会确保焦点保留在模态中

$("#sRelease, #sReleaseCandidate").select2({
    tags: true,
    dropdownParent: $("#modelDialog1")
});

Answer 2

如果您使用的是Bootstrap Modal，则只需从bootstrap modal属性中删除 tabindex =“-1” 。就我而言，效果很好。

Answer 3

使用react-bootstrap时遇到此问题。通过将enforceFocus={false}添加到<Modal />元素来解决该问题。

Answer 4

从模式属性中删除tabindex =“-1”并添加自定义样式=“ width：100％;”正确对齐

无法输入Select2下拉输入搜索字段（http://kevin-brown.com/select2/)

代码：

4 个答案: