semantic-ui 下拉框

　　注意：在使用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>

　　

 

　　

posted @ 2018-05-04 16:18  寻觅beyond  阅读(873)  评论(0)  编辑  收藏  举报
返回顶部