Semantic的Dropdown（下拉框）要怎么用

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