效果：

结合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. gdb调试参数

    参考 这里 1)gdb 打印字符串的全部内容 set print element 0 2)用x命令查看内存(examine的缩写) (gdb) x/1ub 0x7ffff7fbf7a00x7ffff7 ...

  2. [redis] 数据特性简单实验

    位图 由bit位组成的数组,实际的底层数组类型是字符串,而字符串的本质是二进制大对象,所以将其视作位图,位图存储的是boolean指,一定程度上可以减少存储空间. -- 设置位图指定偏移量的比特位的值 ...

  3. Linux进程间通信——使用System V 消息队列

    消息队列 消息队列提供了一种从一个进程向另一个进程发送一个数据块的方法. 每个数据块都被认为含有一个类型,接收进程可以独立地接收含有不同类型的数据结构.我们可以通过发送消息来避免命名管道的同步和阻塞问 ...

  4. C语言编译器和IDE的选择

    什么是编译器: CPU只认识几百个二进制形式的指令,C语言对CPU而言简直就是天书.C语言是用固定的词汇与格式组织起来,简单直观,程序员容易识别和理解. 这时候就需要一个工具,将C语言代码转换成CPU ...

  5. python全栈开发_day8_文件的多种读写方式及游标

    一:文件的多种读写方式 主方式:w    r    a 从方式:t     b    + 了解方式:x    u 1)按t(按照字符进行操作): with open("data_1.txt& ...

  6. python中的try/except/else/finally语句

    与其他语言相同,在python中,try/except语句主要是用于处理程序正常执行过程中出现的一些异常情况,如语法错误(python作为脚本语言没有编译的环节,在执行过程中对语法进行检测,出错后发出 ...

  7. shevle模块

    什么是shevle模块 该模块用于序列化python中的数据,但是序列化已经有pickle了为什么出现了shevle? 因为shevle更加简单,封装了文件的读写操作.load和dump操作, 只有一 ...

  8. Oracle 数据库创建、表空间创建、用户创建 步骤

    一.数据库创建: 1.利用数据库配置助手(DBCA,Database Configuration Assistant)图形化方式 2.创建完成之后,找到  D:\oracle\product\11.2 ...

  9. epoll中epoll_data_t 中fd和ptr的用法

    https://blog.csdn.net/u011123091/article/details/81867078 Linux高性能服务器P152

  10. activeMQ入门+spring boot整合activeMQ

    最近想要学习MOM(消息中间件:Message Oriented Middleware),就从比较基础的activeMQ学起,rabbitMQ.zeroMQ.rocketMQ.Kafka等后续再去学习 ...