Question

我一直在使用select2插件一段时间，直到现在它已经完美了。

我有一个包含3个选择的页面正在加载数据并且运行良好，并且弹出内部有多个选择。它们看起来很好但你不能在搜索字段上写。在主页面搜索工作正常，所以我无法弄清楚问题是什么..

我正在使用弹出窗口的blockUI插件。我已经尝试了z-index，在blockUI函数的回调中销毁并启动插件，但没有任何工作，我不明白为什么。

代码：

<!doctype html>
<html>
<head>
    <title>ff</title>
    <link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js"></script>
    <script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockUI.js"></script>
    <script>
        $(document).ready(function() {
            $(".startselect").select2();

            $('#clickstartpopup').click(function() { 
                $.blockUI({ 
                    message: $('#popblock'),
                    onBlock: function() { 
                        $(".popupselect").select2();

                    }
                });
            });

        });
    </script>
</head>
<body>
<div id="maincontent1" class="maincontent mywebsitepage">
  <select  class="startselect" id="merchantList">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
  </select>
</div>
<div style="clear: both; height: 15px;"></div>
<span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span>
<div style="height: 300px;background-color: red;display:none;" id="popblock" >
   <select class="popupselect">
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</div>
</body>
</html>

Answer 1

之所以发生这种情况，是因为Chosen / Select2的工作方式。实际的原生控件仍然存在，但是不可见，因此可以按照您喜欢的方式重叠元素。

在这种情况下，Select2元素在#popblock之外呈现，如下所示：

<div class="blockUI blockMsg blockPage" style="z-index: 1001; position: fixed; padding: 0px; margin: 0px; width: 30%; top: 40%; left: 35%; text-align: center; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); background-color: rgb(255, 255, 255); cursor: wait;">
    <div style="height: 300px; background-color: red;" id="popblock">
        <div class="select2-container popupselect select2-dropdown-open select2-container-active"
        id="s2id_autogen1">
            <a href="#" onclick="return false;" class="select2-choice" tabindex="-1">   <span>Volvo</span><abbr class="select2-search-choice-close" style="display:none;"></abbr>   <div><b></b></div></a>
        </div>
        <select class="popupselect" style="display: none;">
            <option value="volvo">
                Volvo
            </option>
            <option value="saab">
                Saab
            </option>
            <option value="mercedes">
                Mercedes
            </option>
            <option value="audi">
                Audi
            </option>
        </select>
    </div>
</div>
<div class="select2-drop select2-with-searchbox select2-drop-active" style="top: 337px; left: 692px; width: 76px;">
    <div class="select2-search">
        <input type="text" autocomplete="off" class="select2-input" style="">
    </div>
    <ul class="select2-results">
        <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
            <div class="select2-result-label">
                <span class="select2-match">
                </span>
                Volvo
            </div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class="select2-result-label">
                <span class="select2-match">
                </span>
                Saab
            </div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class="select2-result-label">
                <span class="select2-match">
                </span>
                Mercedes
            </div>
        </li>
        <li class="select2-results-dept-0 select2-result select2-result-selectable">
            <div class="select2-result-label">
                <span class="select2-match">
                </span>
                Audi
            </div>
        </li>
    </ul>
</div>

只有搜索栏似乎不起作用的原因是搜索栏是唯一没有本机对应的UI控件。

select2插件在弹出窗口内无法正常工作

1 个答案: