标签:还需 输入 ref menu text def down name dde
在Semantic找到Dropdown(下拉框)的使用例子,仿照输入,但没有下拉效果,搜索查询一些资料后,得知"selection dropdown"还需要js配合,才能有效果。如果不想执行js,还可以使用别的class,如"ui simple dropdown item" (见本文最后)。
记录如下:
1、首先要连接所需的css和js(我是在django中调试的,需要根据实际位置进行连接):
<link rel="stylesheet" href="{% static ‘dist/semantic.css‘ %}"> <script src="{% static ‘dist/jquery.min.js‘ %}"></script> <script src="{% static ‘dist/semantic.js‘ %}"></script>
2、输入dropdown的代码:
<div class="ui selection dropdown"> <input type="hidden" name="Area"> <!-- 这句不要好像也可以 --> <i class="dropdown icon"></i> <div class="default text">请选择地区</div> <div class="menu"> <div class="item" id="CY">朝阳</div> <div class="item" id="HD">海淀</div> <div class="item" id="TZ">通州</div> </div> </div>
3、放入js代码:
<script> $(function(){ $(‘.ui.selection.dropdown‘).dropdown(); }); </script>
完事,大功告成,截图如下:
另外,用"ui simple dropdown item" 不用执行js也能实现类似效果,"ui simple dropdown item" 使用样例如下:
<div class="ui simple dropdown item"> Area <i class="dropdown icon"></i> <div class="menu"> <div class="item" id="CY">朝阳</div> <div class="item" id="HD">海淀</div> <div class="item" id="TZ">通州</div> </div> </div>
标签:还需 输入 ref menu text def down name dde
原文地址:https://www.cnblogs.com/djlbolgs/p/12591472.html