一，效果图。

二，代码。

<!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. Spring Data Solr的分组查询 for 搜索面板的商品分类

    private List searchCategoryList(Map searchMap) { SimpleQuery query = new SimpleQuery(new Criteria(&q ...

  2. CS231中的python + numpy课程

    本课程中所有作业将使用Python来完成.Python本身就是一种很棒的通用编程语言,现在在一些流行的库(numpy,scipy,matplotlib)的帮助下,它为科学计算提供强大的环境. 我们希望 ...

  3. react中使用阿里Viser图表

    参考demo的codesandbox:https://codesandbox.io/s/kxxxx3w5kv 使用步骤:   1. 安装依赖  viser-react和@antv/data-set 2 ...

  4. 教你用python打造WiFiddos

    本文来源于i春秋学院,未经允许严禁转载. 0x00 前言因为在百度上很难找到有关于用python打造WiFidos的工具的,而且不希望大家成为一名脚本小子,所以我打算写一篇,需要的工具有scapy,i ...

  5. [Swift]LaunchScreen.storyboard如何跳转到到Main.storyboard

    在加载App时,首先读取[LaunchScreen.storyboard]中的内容, 在App加载到内存之后,自动读取[Main.storyboard]中的初始视图控制器, 用于替换原来的[Launc ...

  6. asp.net mvc 安全测试漏洞 " HTTP 动词篡改的认证旁路" 问题解决

    IBM Security Appscan漏洞筛查-HTTP 动词篡改的认证旁路漏洞,具体解决方案: 在Web.Config中system.webServer节点增加配置security: <se ...

  7. python中两种栈实现方式的性能对比

    在计算机的世界中,同一个问题,使用不同的数据结构和算法实现,所使用的资源有很大差别 为了方便量化python中算法的资源消耗,对性能做测试非常有必要,这里针对stack做了python语言 下的性能分 ...

  8. PCA历程详细python代码（原创）

    #PCA主成分分析,原文为文末的链接,代码为自己亲自手码 def cov_out1(dx,dy): #第一步:求解x,y各自的均值 mean_x=0 mean_y=0 for i in range(l ...

  9. 课程四(Convolutional Neural Networks)，第四 周（Special applications: Face recognition & Neural style transfer） —— 3.Programming assignments：Face Recognition for the Happy House

    Face Recognition for the Happy House Welcome to the first assignment of week 4! Here you will build ...

  10. python字符串操作简单方法

    1.join #将字符中的每一个元素按照指定分隔符进行拼接 test='你说话带空格' print(test) t=' ' x='_' print(t.join(test)) print(x.join ...