效果：
結合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>