注意：在使用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. PostgreSQL远程访问设置

    数据库版本:9.3.23(Windows xp系统) 步骤: 1.需要修改数据库安装目录下的pg_hba.conf文件 修改成: 2.并使用psql执行pg_ctl reload重新加载配置文件

  2. 排序算法之选择排序的思想以及Java实现

    1 基本思想 选择排序的思想是,每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完. 2,算法的实现(Java) package Algorit ...

  3. MATLAB简易画图2—普通直角坐标系

    MATLAB简易画图2—普通直角坐标系 本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...

  4. 【CQOI2006】凸多边形

    1713 -- [CQOI2006]凸多边形 Description 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. Input ...

  5. 11.redis_python

    # pip install redis import redis # 1.链接数据库 key--value client = redis.StrictRedis(host='127.0.0.1', p ...

  6. 自己动手写处理器之第二阶段（1）——可编程逻辑器件与PLD电路设计流程

    将陆续上传本人写的新书<自己动手写处理器>(尚未出版),今天是第五篇,我尽量每周四篇         通过上一章的介绍,读者应该知道CPU内部有一些主要的电路,比方:译码电路.运算电路.控 ...

  7. centos7下安装docker（13.4容器volume总结）

    最近我们学习了docker 存储,首先docker存储有两种:storage driver和data volume. storage driver是由镜像层和容器层组成的,可以通过docker ins ...

  8. multiply对应位置相乘 与 dot矩阵乘

    区别 # -*- coding: utf- -*- import numpy as np a = np.array([[,], [,]]) b= np.arange().reshape((,)) c ...

  9. centos7 mongodb安装

    参考文档 http://www.runoob.com/mongodb/mongodb-connections.html https://www.cnblogs.com/layezi/p/7290082 ...

  10. P2708 硬币翻转（简单模拟）

    题意:弱鸡,其实题意是1到i都变化.然后把所有的硬币都变到正面. 简单的模拟: 思路:本质就是记录相邻字符的有几组不同,比如11010,则就有3组不同,但是,这样变化出来的字符串是00000,所以需要 ...