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

发布于 2022-09-06 06:46:07 字数 2568 浏览 15 评论 0

这个页面的选择框点击没有发生 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>

显示效果是这样的。

网页在浏览器打开后生成的 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 去掉之后

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终遇你 2022-09-13 06:46:07

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) 除外~

回复收藏 0