效果：

结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option，随着option:selected选中的字号而改变相应的字体大小

代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="Bootstrap/css/bootstrap-theme.min.css" />

</head>

<body>

    <div class="col-md-2" style="float: none; margin: 20px auto;">

        <select class="form-control" id="select-font-size"></select>

    </div>

    <p style="width: 600px;margin: 0 auto;text-indent: 2em;">如果需要没有文字，输入框（input）正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。</p>

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(function() {

            var fontSize = ['12px', '14px', '16px', '18px', '20px', '24px', '36px'];

            for (var i = 0; i < fontSize.length; i++) {

                // ES6字符串模板

                var Html = `<option>${fontSize[i]}</option>`

                $("#select-font-size").append(Html);

                $("#select-font-size option").eq(i).css('font-size', fontSize[i]);

            }

            // ES6箭头函数

            $('body').on("change", "#select-font-size", () => {

                var fontCss = $("#select-font-size").find('option:selected').css('font-size');

                $("p").css('font-size', fontCss);

            })

        })

    </script>

</body>

</html>

　　

select下拉框选择字体大小的更多相关文章

  1. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  2. selenium自动化实例： 多层框架中关于iframe的定位，以及select下拉框选择

    对于一个自动化的初学者来说会很常见的遇到元素明明存在却始终定位不到, 从而导致脚本报错,当然定位不到元素的原因很多, 其中一种就是多层框架iframe导致的 下方截图示意: 下方为写脚本时候的示例并其 ...

  3. 微信小程序手动实现select下拉框选择

    在小程序中没有像h5中的下拉 标签的 picker又满足部了,那就自己动手写 <view class='list-msg'> <view class='list-msg1'> ...

  4. 关于select下拉框选择触发事件

    最开始使用onclick设置下拉框触发事件发现会有一些问题: <select> <option value="0" onclick="func0()&q ...

  5. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  6. jQuery插件实现select下拉框左右选择_交换内容（multiselect2side）

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  7. 将select的默认小三角替换成别的图片，且实现点击图片出现下拉框选择option

    最近做项目,要求修改select下拉框的默认三角样式,因为它在不同浏览器的样式不同且有点丑,找找网上也没什么详细修改方法,我就总结一下自己的吧. 目标是做成下图效果: 图一:将默认小三角换成红圈的三角 ...

  8. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  9. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

随机推荐

  1. c 调用 lua 向lua函数 传递table

    参考 https://www.myvoipapp.com/blogs/yxh/2016/07/14/c%E5%90%91lua%E5%87%BD%E6%95%B0%E4%BC%A0%E9%80%92t ...

  2. 利用腾讯云为你的域名申请并配置免费SSL一年

    我想,点进来的朋友,应该都知道SSL的重要性吧.这里就简单提一下,大型网站域名只有配置了SSL后,才会更加安全. 现在,微信小程序也开始要求后台必须是SSL配置后的域名了.说了这么多,估计有些人还是有 ...

  3. 对drf序列化器的理解

    序列化: 将对象的状态信息转换为可以存储或传输的形式的过程.(百度定义) 对应到drf中,序列化即把模型对象转换为字典形式, 再返回给前端,主要用于输出 反序列化: 把其他格式转化为程序中的格式. 对 ...

  4. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  5. POJ_2155 Matrix 【二维树状数组】

    一.题面 POJ2155 二.分析 楼教主出的题,是二维树状数组非常好的题,还结合了开关问题(开关变化的次数如果为偶数,状态不变,奇数状态相反). 题意就是给了一个二维的坐标平面,每个点初始值都是0, ...

  6. 第六次 Scrum Meeting

    第六次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/10 22:00 30min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结(4.10 ...

  7. RabbitMQ的TopicExchange通配符问题

    TopicExchange交换机支持使用通配符*.# *号只能向后多匹配一层路径. #号可以向后匹配多层路径.

  8. oracle表空间tablespace

    用户:用户是在实例下建立的.不同实例可以建相同名字的用户. 表空间:表空间是一个用来管理数据存储逻辑概念,表空间只是和数据文件(ORA或者DBF文件)发生关系,数据文件是物理的,一个表空间可以包含多个 ...

  9. Git创建版本库和添加文件

    创建版本库: 首先新建一个目录,然后通过 $ git init命令把这个目录变成Git可管理的仓库,例如: 在"C:\AmyPersonal\AmyGit"路径下新建文件夹Git1 ...

  10. Kafka 0.9 新消费者API

    kafka诞生之初,它自带一个基于scala的生产者和消费者客户端.但是慢慢的我们认识到这些API有很多限制.比如,消费者有一个“高级”API支持分组和异常控制,但是不支持很多更复杂的应用场景:它也有 ...