bootstrap 的 flat-ui 下拉选择框的事件

这个页面的选择框点击没有发生 alter() ,要改变选项才会发生。

<!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="机构类型">
                        <option value="0">分行</option>
                        <option value="1">支行</option>
                        <option value="1">网点</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>

显示效果是这样的。
clipboard.png

网页在浏览器打开后生成的 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="机构类型">
<option value="0">分行</option>
<option value="1">支行</option>
<option value="1">网点</option>
</optgroup>
</select>

把css 去掉之后

clipboard.png

这个时候点击选择框会弹出窗口,其他元素都不会弹出窗口。

基本可以确定,flat-ui把select 元素隐藏了。。。

我想在选择框被点击的时候触发事件,应该怎么做。谢谢各位大佬

阅读 3.9k
2 个回答

https://cdn.bootcss.com/flat-...
以上是源码,找到initSelection
然后再找 select2-chosen- 注意没有数字2

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

好了,自己写绑定事件吧 ...

--- 再次编辑 ---

源码中的Select2 初始化时
this.container = this.createContainer();
你可以看到这个部分以下,就是创建的整个过程,你会发现在创建的时候,对于事件根本就没有绑定,而且有一个神奇的事情,就是你手动添加绑定,也是绑定不上去的。具体是否被它的 killEvent 给限制了,还是怎样,暂时还没有找到原因。

PS:不知道你是什么业务,一般使用select不给click事件,纯属建议。不信你可以试试,click时间是会在其他浏览器被option触发的。好像,额,IE (还是部分IE) 除外~

用jquery 的事件解决了。。。

暂时不关,等大佬的回答

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题