效果：

结合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. Python多继承的C3算法

    C3算法 一.知识点补充: 拓扑排序:在图论中,拓扑排序(Topological Sorting) 是一个 有向无环图(DAG,Directed Acyclic Graph) 的所有顶点的线性序列.且 ...

  2. UITextView笔记

    UITextView继承自UIScrollView UITextView可以展示多行文字 控制上下左右缩进 myTextField.textContainerInset = UIEdgeInsetsM ...

  3. 阿里java开发规范学习(附P3C IDEA插件 帮助规范的养成)

    浅析 阿里巴巴 Java 开发规约 (未完成) 更加优秀的页面展现请到浅析 阿里巴巴 Java 开发规约 contents 为什么要学 编程规约 P3C IDEA 插件 why-use 我们知道,一般 ...

  4. Using Request Headers for Metadata Address

    问题描述 我将一个在本地调试正常的service部署到服务器后遇到了添加服务引用失败的问题.在把配置文件中基址使用的localhost替换成服务器的ip地址后问题得到了解决.但我感觉这并不是一个因为粗 ...

  5. 863公司 linux软测题

    1.浏览目录命令 2.浏览文件命令 3.目录操作命令 4.文件操作命令 5.进程管理命令

  6. Java的输出方式

    System.out.println("...." + elements + "..."); 格式化输出: 我们知道输出格式化数字可以使用 printf() 和 ...

  7. Windows下代替自带cmd的开源软件cmder

    cmder cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令 下载 Cmder官网 下载的时候,会有两个版本,分别是mini与 ...

  8. U盘拷贝大文件提示文件过大无法拷贝解决方案

    工具: 计算机 windows操作系统 U盘 原因:由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件 方法:接下来修改U盘类型,且不格式化U盘 1.键盘win+R快捷键弹出 ...

  9. 【云计算】impala建表，文件关联，查询

    [cloudil@hadoop164 caixianfeng]$ hdfs dfs -mkdir -p /csv-pig/tab1 /csv-pig/tab1 tab1.csv: 1,true,123 ...

  10. checkbox 框 选中判断

    function checkAll(checktop){ $(":checkbox[name='id']").prop("checked",checktop.c ...