bootstrap 的 flat-ui 下拉選擇框的事件

這個(gè)頁(yè)面的選擇框點(diǎn)擊沒(méi)有發(fā)生 alter() ，要改變選項(xiàng)才會(huì)發(fā)生。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head th:replace="fragment/header::header">
  <link href="../css/flat-ui.css" rel="stylesheet">
  </head>
  <body>
        </div><!-- /navbar -->
        <select onclick="alert()" class="form-control select select-primary select-block mbl" style="margin-bottom: 0px;">
                    <optgroup label="機(jī)構(gòu)類型">
                        <option value="0">分行</option>
                        <option value="1">支行</option>
                        <option value="1">網(wǎng)點(diǎn)</option>
                      </optgroup>
    </select>
    </div>
    <script src="../js/vendor/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../js/flat-ui.js"></script>
  </body>
  <script type="text/javascript">
    $("select").select2({dropdownCssClass: 'dropdown-inverse'});
  </script>
</html>

顯示效果是這樣的。

網(wǎng)頁(yè)在瀏覽器打開(kāi)后生成的 html代碼

<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
   <span class="select2-chosen" id="select2-chosen-2">分行</span>
<abbr class="select2-search-choice-close"></abbr>   
<span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a>
<label for="s2id_autogen2" class="select2-offscreen"></label>
<input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-2" id="s2id_autogen2">
</div>
<select onclick="alert()" class="form-control select select-primary select-block mbl select2-offscreen" style="margin-bottom: 0px;" tabindex="-1" title="">
<optgroup label="機(jī)構(gòu)類型">
<option value="0">分行</option>
<option value="1">支行</option>
<option value="1">網(wǎng)點(diǎn)</option>
</optgroup>
</select>

把css 去掉之后

這個(gè)時(shí)候點(diǎn)擊選擇框會(huì)彈出窗口，其他元素都不會(huì)彈出窗口。

基本可以確定，flat-ui把select 元素隱藏了。。。

我想在選擇框被點(diǎn)擊的時(shí)候觸發(fā)事件，應(yīng)該怎么做。謝謝各位大佬

回答

編輯回答

枕邊人

https://cdn.bootcss.com/flat-...
以上是源碼,找到initSelection
然后再找 select2-chosen- 注意沒(méi)有數(shù)字2

selection.find(".select2-chosen").attr("id", "select2-chosen-"+idSuffix);

好了，自己寫綁定事件吧 ...

--- 再次編輯 ---

源碼中的Select2 初始化時(shí)
this.container = this.createContainer();
你可以看到這個(gè)部分以下，就是創(chuàng)建的整個(gè)過(guò)程，你會(huì)發(fā)現(xiàn)在創(chuàng)建的時(shí)候，對(duì)于事件根本就沒(méi)有綁定，而且有一個(gè)神奇的事情，就是你手動(dòng)添加綁定，也是綁定不上去的。具體是否被它的 killEvent 給限制了，還是怎樣，暫時(shí)還沒(méi)有找到原因。

PS：不知道你是什么業(yè)務(wù)，一般使用select不給click事件，純屬建議。不信你可以試試，click時(shí)間是會(huì)在其他瀏覽器被option觸發(fā)的。好像，額，IE (還是部分IE) 除外~

2018年9月14日 20:06

編輯回答