注意：在使用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. Beta阶段 - 博客链接合集

    Beta阶段 - 博客链接合集 项目Github地址 安卓端(Stardust):https://github.com/StardustProject/Stardust 服务器端(Gravel):ht ...

  2. ubuntu下配置rsync，实现远程备份

    rysnc(remote synchronize)在CentOS系统默认安装在/usr/bin,此外rysnc在windows平台下也有相应版本.主页地址为: http://rsync.samba.o ...

  3. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  4. MySQL大小写敏感的解决方案

    前言:对于MySQL的大小写敏感的影响,笔者在一个小项目中深刻的体会到:当想要查询一条数据时,总是出来两条或多条,后来发现是大小写敏感造成的原因,本文就该问题提出解决方案. 1.MySQL大小写敏感的 ...

  5. SICP 习题 （1.43）解题总结

    SICP 习题 1.43 是前面两道题的延续,习题要求我们定义一个过程(repeat f n) .当中f是一个单參数过程.题目要求我们通过repeat过程将过程f调用n次,注意是嵌套调用n次,不是连续 ...

  6. 局域网下Android与scoket通信的实现

    因为最近实验室项目要求实现在局域网下将android app数据发送到winsock中进行保存,所以对此进行了简单学习.pc端因为是另一个同学做的,所以不做说明. 在android端,首先添加权限: ...

  7. redis在.net架构中的应用(1)--使用servicestack连接redis

    引言:作为少有的.net架构下的大型网站,stackoverflow曾发表了一篇文章,介绍了其技术体系,原文链接http://highscalability.com/blog/2011/3/3/sta ...

  8. web基础之http

    目录 1.Http协议介绍 Http工作原理 http的请求方法 http的响应响应状态码 状态码的类别 常用HTTP状态码简要介绍 用户访问网站携带的参数,以及服务端返回的参数 (http请求报文 ...

  9. （1） 安卓导入mqtt包基本通信

    参考资料:http://blog.csdn.net/qq_17250009/article/details/52774472 MQTT官网:http://mqtt.org/ MQTT介绍:http:/ ...

  10. 转载 1-EasyNetQ介绍（黄亮翻译） https://www.cnblogs.com/HuangLiang/p/7105659.html

    EasyNetQ 是一个容易使用,坚固的,针对RabbitMQ的 .NET API. 假如你尽可能快的想去安装和运行RabbitMQ,请去看入门指南.EasyNetQ是为了提供一个尽可能简洁的适用与R ...