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

　　

　　

semantic-ui 下拉框的更多相关文章

  1. easy ui 下拉框绑定数据select控件

    easy ui 中的下拉框控件叫做select,具体代码如下: html代码:①.这是一个公司等级的下拉框 <tr> <td>公司等级:</td> <td&g ...

  2. element ui下拉框如何实现默认选择?

    <template> <el-select v-model="value4" clearable placeholder="请选择"> ...

  3. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...

  4. Bootstrap Flat UI的select下拉框显示不出来 问题解决

    Bootstrap Flat UI的select下拉框显示不出来?看这里,恰巧今天我也遇到了这个问题: 点击Messages后并没有出现下拉列表,然而官网的index.html却能显示出来. 经过一番 ...

  5. UI中经常出现的下拉框下拉自动筛选效果的实现

    小需求是当你在第一个下拉框选择了国家时,会自动更新第二个省份的下拉框,效果如下 两个下拉选择Html如下: <select id="country_select"> & ...

  6. easy ui 下拉级联效果 ，下拉框绑定数据select控件

    html代码: ①两个下拉框,一个是省,另一个市 <tr> <td>省:</td> <td> <select id="ProvinceI ...

  7. Android UI自定义Spinner下拉框（用popuwindow实现）-转

    定义出第一个图片的布局和弹出框(一个listView)的布局,,这里就不在多说了~ListView需要自己定义一个MyspinnerAdapter~做好这些准备之后,就是弹出框的实现了~  prote ...

  8. UI自动化之特殊处理二（弹框\下拉框\选项\文件上传）

    弹框\下拉框\选项\文件上传也是一些比较特殊的操作 目录 1.弹框 2.下拉框 3.选项 4.文件上传 1.弹框 弹框有三种形式,value为alert.confirm.prompt三种的弹框,第一个 ...

  9. selenium处理select标签的下拉框

    有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select  ...

随机推荐

  1. LeetCode算法题-Excel Sheet Column Number（Java实现）

    这是悦乐书的第182次更新,第184篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第41题(顺位题号是171).给定Excel工作表中显示的列标题,返回其对应的列号.例如 ...

  2. February 20th, 2018 Week 8th Tuesday

    Receive without conceit, release without struggle. 接受时,不狂妄:放手时,不犹豫. How to understand this quote? Do ...

  3. ztree插件异步加载 使用RESTEasy报错 Only resource methods using @FormParam will work as expected. Resource methods consuming the request body by other means will not work as expected.

    在使用ztree插件实现异步加载时遇到后台RESTEasy接收参数问题,查看后台报错: A servlet request to the URI http://localhost:8080/area/ ...

  4. python 类与类之间的关系

    一.依赖关系(紧密程度最低) (1)简单的定义:就是方法中传递一个对象.此时类与类之间存在依赖关系,此关系比较低. (2)实例植物大战僵尸简易版 题目要求:创建一个植物,创建一个僵尸 1.植物:名字. ...

  5. css图片热点链接的设置

    一.热点的原理 图片通过usemap="#Map"属性将名称为"Map"的热点区域及连接映射到图片上. 一般来说,图片的usermap属性对应的是map热点的n ...

  6. 用H5开发微信还是开发APP？

    用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭 ...

  7. C#自动化操作IE浏览器系列之一打开新的浏览器并导航到百度进行搜索

    现在OA系统.生产管理系统都是B/S结构,很多的办公室工作都要用浏览器操作.自己会一点C# winform开发,就做个小工具自动化处理一些繁琐的操作. 我的开发环境是:win7旗舰版+VS2010(或 ...

  8. 洛谷P1274-魔术数字游戏

    Problem 洛谷P1274-魔术数字游戏 Accept: 118    Submit: 243Time Limit: 1000 mSec    Memory Limit : 128MB Probl ...

  9. 转://Oracle A用户给B用户授权查询指定表或视图权限方案

    用DNINMSV31账户登录数据库进行如下操作: CREATE USER NORTHBOUND IDENTIFIED BY NORTHBOUND DEFAULT TABLESPACE "TB ...

  10. 【vue】vue +element 搭建项目，在使用InputNumber 计数器时遇到的问题

    自己遇到的坑: InputNumber 计数器的change事件定义时如果不传入参数value,会产生this.num不同步的问题 <template> <el-input-numb ...