一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

</head>

<body>

    <div class="list">

        <div class="item item-input item-select">

            <div class="input-label">

                Lightsaber

            </div>

            <select>

                <option>Blue</option>

                <option selected="">Green</option>

                <option>Red</option>

            </select>

        </div>

        <div class="item item-input item-select">

            <div class="input-label">

                Fighter

            </div>

            <select>

                <option>ARC-170</option>

                <option>A-wing</option>

                <option>Delta-7</option>

                <option>Naboo N-1</option>

                <option>TIE</option>

                <option selected="">X-wing</option>

                <option>Y-wing</option>

            </select>

        </div>

        <div class="item item-input item-select">

            <div class="input-label">

                Droid

            </div>

            <select>

                <option>2-1B</option>

                <option>B1</option>

                <option>C-3PO</option>

                <option>IG-88</option>

                <option>IT-O</option>

                <option selected="">R2-D2</option>

            </select>

        </div>

        <div class="item item-input item-select">

            <div class="input-label">

                Planet

            </div>

            <select>

                <option>Alderaan</option>

                <option selected="">Dagobah</option>

                <option>Felucia</option>

                <option>Geonosis </option>

                <option>Hoth</option>

                <option>Kamino</option>

                <option>Mygeeto</option>

                <option>Naboo</option>

                <option>Tataouine</option>

                <option>Utapau</option>

                <option>Yavin</option>

            </select>

        </div>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic-select的更多相关文章

  1. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. SQL笔记1：SELECT及SELECT高级应用

      T-SQL笔记1:SELECT及SELECT高级应用 本章摘要 1:安装AdventureWorks 2:基本运算符和表达式 3:between 4:like 5:escape 6:TOP 7:G ...

  3. DW网页代码笔记

    DW网页代码笔记 1.样式.       class  插入类样式  标签技术(html)解决页面的内容样式技术(css)解决页面的外观脚本技术       解决页面动态交互问题<form> ...

  4. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  5. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  6. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  7. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  8. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

  9. 前端学习:JS(面向对象)代码笔记

    前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...

  10. ionic-CSS：ionic select

    ylbtech-ionic-CSS:ionic select 1.返回顶部 1. ionic select ionic select 的 select 相比原生的要更加美观些.但是弹出的可选选项样式是 ...

随机推荐

  1. 【算法python实现】 -- 不同路径II

    原题:https://leetcode-cn.com/problems/unique-paths-ii/ 思路 与上题相同,不过是加了路障.地图上每一格都有两个状态,有路障或无路障,分别以1和0表示其 ...

  2. javaScript 二分查找

    什么是二分查找的,举个栗子: var arr = [1, 3, 5, 7, 9, 11, 14, 15, 17, 19, 20]; 上面有序数组, 随便给你一位 9 ,输出该数在数组中的索引.   当 ...

  3. php省市联动实现

    设计模式:ajax实现,数据库格式:id,name,parent_id 数据库: CREATE TABLE IF NOT EXISTS `city` ( `id` ) NOT NULL AUTO_IN ...

  4. 【xsy1300】 原题的旅行 最短路+倍增

    题目大意:有一个$n$个点,$m$条边的无向图,玩家走过第$i$条边,血槽中的血会下降$v_i$点,如果不足$v_i$点,这人会当场去世. 这$n$个点中,有若干个是关键点,在这些关键点可以将血槽补满 ...

  5. 理解 Python 的执行方式，与字节码 bytecode 玩耍 （上）

    这里有个博客讲 Python 内部机制,已经有一些中文翻译. 可能因为我用的Python 3.5,例子跑起来有些不一样. 此外,我又查了其他一些参考资料,总结如下: Python 的执行方式 先看一个 ...

  6. zabbix报错cannot set resource limit: [13] Permission denied解决方法

    zabbix-server启动时出现以下错误: 2912:20180326:050930.023 using configuration file: /etc/zabbix/zabbix_server ...

  7. C#字符串分割成列表及相反转换

    在实际开发中,一些老系统,特别是ERP,在做数据交换的时候,保存的是文本格式,然后以一个特殊符号隔开.如 2018-01-02 12:33:20#24.4#20.0|2018-01-03 11:33: ...

  8. hadoop之editlogs和fsimage

    一.概述 hadoop的namenode和secondarynamenode: 1.   namenode负责 负责客户端请求的响应 元数据的管理(查询,修改) 2.    元数据管理 namenod ...

  9. Java设计模式学习记录-组合模式

    前言 今天要介绍的设计模式是组合模式,组合模式也是结构型设计模式的一种,它主要体现了整体与部分的关系,其典型的应用就是树形结构.组合是一组对象,其中的对象可能包含一个其他对象,也可能包含一组其他对象. ...

  10. Jenkins持续集成学习-Windows环境进行.Net开发3

    目录 Jenkins持续集成学习-Windows环境进行.Net开发3 目录 前言 目标 优化nuget包生成流程 自动触发构建 Jenkins定时轮询触发 SVN客户端钩子触发 SVN服务器钩子触发 ...