注意：在使用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. [转载]深入理解JavaScript系列 --汤姆大叔

    深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript ...

  2. netsh winsock reset命令，作用是重置 Winsock 目录

    Win xp重置 编辑 要为 Windows XP 重置 Winsock,请按照下列步骤操作: 1.单击“开始”,运行中输入cmd. 2.然后输入命令 netsh winsock reset. 3.重 ...

  3. Linux中的文件查找技巧

    前言 Linux常用命令中,有些命令可以帮助我们查找二进制文件,帮助手册或源文件的位置,也有的命令可以帮助我们查找磁盘上的任意文件,今天我们就来看看这些命令如何使用. witch witch命令会在P ...

  4. Maven——settings.xml配置

    settings.xml配置 原文 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed ...

  5. ZooKeeper Observers解决节点过多时写性能下降问题

    ZooKeeper Observers Observers: Scaling ZooKeeper Without Hurting Write Performance How to use Observ ...

  6. 获取Spring容器Bean对象工具类

    在开发中,总是能碰到用注解注入不了Spring容器里面bean对象的问题.为了解决这个问题,我们需要一个工具类来直接获取Spring容器中的bean.因此就写了这个工具类,在此记录一下,方便后续查阅. ...

  7. setjmp/longjmp

    1.setjmp/longjmp属于传统的错误处理 2.setjmp/longjmp是对goto语句的补充,goto仅仅能实现局部跳转.setjmp/longjmp能够实现全局跳转 3.setjmp/ ...

  8. 在Ubuntu上安装Jenkins

    先决条件 安装Java SDK sudo apt-get install openjdk-8-jdk # sudo apt-get install openjdk-7-jdk 早些系统可以安装 第1步 ...

  9. ORA-4031 错误故障排除与诊断[视频] (Doc ID 2016002.1)

    Copyright (c) 2019, Oracle. All rights reserved. Oracle Confidential.     ORA-4031 错误故障排除与诊断[视频] (Do ...

  10. i春秋-百度杯十月场-vld

    查看源码,有提示,index.php.txt  ,  进入得到文本. 不太看得懂,后来百度,大致就是,flag1=.......&flag2=......&flag3=...... , ...