效果：

结合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为何需要虚拟环境--Python虚拟环境的安装和配置-virtualenv

    一 虚拟环境 virtual environment 它是一个虚拟化,从电脑独立开辟出来的环境.通俗的来讲,虚拟环境就是借助虚拟机docker来把一部分内容独立出来,我们把这部分独立出来的东西称作“容 ...

  2. 无法下载APP

    最近遇见下面的情况两次,各种搜索过资料,但是都没什么结果,把自己的解决方法分享如下: 实践证明,出现这个问题,应该是出现了下面几方面原因: 第一次遇见上述问题,是年后来到公司接手了新项目,然后不久传来 ...

  3. 关闭tensorflow运行时的警告信息

    执行简单的矩阵相乘的程序: import tensorflow as tf m1 = tf.constant([[3,3]]) m2 = tf.constant([[2],[3]]) product ...

  4. SQL语句之用户管理

    SQL语句系列 1.SQL语句之行操作 2.SQL语句之表操作 3.SQL语句之数据库操作 4.SQL语句之用户管理 占坑,待写……

  5. Luogu P1886 滑动窗口

    P1886 滑动窗口 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The a ...

  6. 2019 CCPC-Wannafly Winter Camp Day4(Div2, onsite)

    slove 6/11 A.夺宝奇兵 Code:zz Thinking:zz 贪心即可.这条路线里,点n1和点n2肯定是相连的,接下来,点(n-1)1和点(n-1)2分别是和n1和点n2相连的,一共有两 ...

  7. Weblogic反序列化远程命令执行漏洞(CNVD-C-2019-48814)测试

    漏洞简介 2018年4月18日,Oracle官方发布了4月份的安全补丁更新CPU(Critical Patch Update),更新中修复了一个高危的 WebLogic 反序列化漏洞CVE-2018- ...

  8. layui 时间插件laydate ,取消回调

    背景:转型新公司不再是做前端展示H5之类的东西,主要业务是后台数据读取和插件搭建前端页面,接触的第一个老项目是layui制作的,由于业务需求,需要用到时间插件以下为时间插件的一些用法--------- ...

  9. node学习网站

    https://nodejs.org/api/tty.html https://www.cnblogs.com/vajoy/p/4783390.html     process下面的所有方法

  10. SQL Server 保留关键字

    Microsoft SQL Server 2005 使用保留关键字来定义.操作或访问数据库.保留关键字是 SQL Server 使用的 Transact-SQL 语言语法的一部分,用于分析和理解 Tr ...