效果：

结合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. svn提交新文件夹同时不需要更新全部上级目录

    关于svn的指定目录指定位置更新:当在提交了新建的目录后可以使用 a)  在需要更新的上级目录上单击右键 在延伸菜单中选择 b)  弹出对话框中选择,check repository c)  新添加的 ...

  2. jquer 使用原生DOM对象

    js中使document.getElementById("ID"); Jquery中可以使用$("#id") 或者$("#id").get( ...

  3. postgres常用命令

    1.登录 psql -U pname -d database  // pname 表示postgres的登录用户名,database 则表示要访问的数据库 2.查看所有的数据库 \l 3.查看所有的表 ...

  4. mysql5.1解压版安装

    1.如果已经安装别的版本先卸载干净,cmd管理员权限登录,mysql\bin目录:mysqld -remove 2.环境变量 MYSQL:path 3.my.ini [mysqld]port=3306 ...

  5. <div>标签输入文字

    @*输入框,contenteditable="true"使能div可以输入文字*@ <div contenteditable="true" class=& ...

  6. linux新增特性timerfd

    https://blog.csdn.net/shreck66/article/details/49745149

  7. react渲染原理深度解析

    https://mp.weixin.qq.com/s/aM-SkTsQrgruuf5wy3xVmQ   原文件地址 [第1392期]React从渲染原理到性能优化(二)-- 更新渲染 黄琼 前端早读课 ...

  8. jQuery 学习笔记(TryjQuery)

    第一集.页面加载完成后执行 js 代码: $(document).ready(function(){ $("h1").text("Where to?"); }) ...

  9. 如何去除内联元素（inline-block元素）之间的间距

    <body><a href="http://www.baidu.com">百度</a><a href="http://www.i ...

  10. Win7与Ubuntu双系统安装过程

    Win7安装1.宏基安装Win7插入Win7系统光盘-> 重新启动-> 按F12-> 选择CD安装-> 按任意键-> 选择自定义(高级),接下去根据提示安装. 2.华硕安 ...