html 下拉框字体 select下拉框选择字体大小

效果：

结合Bootstrap、jQuery和ES6字符串模板与箭头函数使用JavaScript DOM操作动态添加option，随着option:selected选中的字号而改变相应的字体大小

代码:

如果需要没有文字，输入框(input)正是你所期望的。 目前只适用于非内联的 checkbox 和 radio。

$(function() {

var fontSize = [‘12px‘, ‘14px‘, ‘16px‘, ‘18px‘, ‘20px‘, ‘24px‘, ‘36px‘];

for (var i = 0; i < fontSize.length; i++) {

// ES6字符串模板

var Html = `${fontSize[i]}`

$("#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);

})

})