注意：在使用semantic的下拉框的时候，不仅需要引入semantic.css，还要引入semantic.js，最重要的是引入jquery。否则下拉效果不会显示。
并且，jquery必须先于semantic.js引入，因为semantic.js需要用到jquery。
1、标准的下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<link href="../dist/semantic.css" rel="stylesheet" />
<script src="../jquery.js"></script>
<script src="../dist/semantic.js"></script>
</head>
<body style="padding:30px">
<div class="ui selection dropdown">
<input type="hidden" name="gender" id="gender">
<i class="dropdown icon"></i>
<div class="default text">性别</div>
<div class="menu">
<div class="item" data-value="1">男性</div>
<div class="item" data-value="0">女性</div>
</div>
</div>
<button class="ui button" id="btn">提交</button>
</body>
<script>
$(document).ready(function(){
$('.ui.selection.dropdown').dropdown();
$("#btn").on("click",()=>{
alert($("#gender").val());
});
});
</script>
</html>
2、搜索功能的下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<link href="../dist/semantic.css" rel="stylesheet" />
<script src="../jquery.js"></script>
<script src="../dist/semantic.js"></script>
</head>
<body style="padding:30px">
<div class="ui fluid search selection dropdown">
<input type="hidden" name="alpha" id="alpha">
<i class="dropdown icon"></i>
<div class="default text">选择字母</div>
<div class="menu">
<div class="item" data-value="ABC">ABC</div>
<div class="item" data-value="CDE">CDE</div>
<div class="item" data-value="EFG">EFG</div>
<div class="item" data-value="GHI">GHI</div>
</div>
</div>
<button class="ui button" id="btn">提交</button>
</body>
<script>
$(document).ready(function(){
$('.ui.selection.dropdown').dropdown();
$("#btn").on("click",()=>{
alert($("#alpha").val());
});
});
</script>
</html>
