0

我一直在使用 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>
4

1 回答 1

0

The reason this is happening is because of the way Chosen/Select2 works. The actual native controls are still there, but are made invisible so that elements can be overlayed which are styled the way you like them.

In this case, the Select2 elements are rendered outside of #popblock, like this:

<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>

The reason that only the search bar seems to not be working is that the search bar is the only UI control that does not have a native counterpart.

于 2013-05-01T02:39:14.807 回答