注意：在使用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. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  2. CSS3的新特性整理

    animation    IE10 animation的六大属性 animation-name规定需要绑定选择器的keyframe名称 animation-duration规定完成动画所花费的时间 s ...

  3. IOC注解开发与XML整合

    区别: xml:可以适用于任何场景,结构清晰,方便维护 注解:开发方便,快速.有些地方适用不了,这个类不是自己提供的(比如源码提供的类) xml和注解整合开发,各取所长 xml使用于对bean进行管理 ...

  4. Linux最终将会领先于Windows、Mac OS！

    Linux最终将会领先于Windows.Mac OS! 众所周知,硬件离开了软件就像人失去灵魂,而操作系统作为软件中的基础部分,更是重中之重!无论手机.电脑.还是服务器一旦离开了操作系统,比之一堆废铁 ...

  5. Python中的单例模式——装饰器实现剖析

    Python中单例模式的实现方法有多种,但在这些方法中属装饰器版本用的广,因为装饰器是基于面向切面编程思想来实现的,具有很高的解耦性和灵活性. 单例模式定义:具有该模式的类只能生成一个实例对象. 先将 ...

  6. 【转】【fiddler】抓取https数据失败，全部显示“Tunnel to......443”

    这个问题是昨天下午就一直存在的,知道今天上午才解决,很感谢“韬光养晦”. 问题描述: 按照网络上的教程,设置fiddler开启解密https的选项,同时fiddler的证书也是安装到系统中,但是抓取h ...

  7. 【转】FFmpeg 基本用法

    FFmpeg FFmpeg 基本用法 本课要解决的问题 1.FFmpeg的转码流程是什么? 2.常见的视频格式包含哪些内容吗? 3.如何把这些内容从视频文件中抽取出来? 4.如何从一种格式转换为另一种 ...

  8. ssm框架的整合搭建（三）

    mybatis逆向工程工具类的使用---mybatis  generator 项目结构 配置文件 <?xml version="1.0" encoding="UTF ...

  9. 理解MySql的锁&事务隔离级别

    这几篇文章是从网上(http://www.hollischuang.com)看到的一系列文章,也是重温了一下数据库的相关知识.下面是对这些文章的一些前后行文逻辑的说明: 我们知道,在DBMS的多个事业 ...

  10. Java线程和线程池

    Android中创建线程的方式有,new Thread,new Thread(Runnable),new Thread(Callable)的形式. A. 直接new Thread简单方便. B. ne ...