Javascript 将变量名而不是变量值添加到选择列表

我试图向select标记添加新选项，但我的代码添加的是变量名addedFont，而不是实际数字（即20像素）

main.js

$("#add-font-size").click(function(){
    var addedFont = $("#fontSizeInput").val();
    $("#font-select").append("<option value = addedFont> addedFont pixels </option>");
});

$（“#添加字体大小”）。单击（函数（）{
var addedFont=$（“#fontSizeInput”）.val（）；
$（“#字体选择”）.append（“addedFont像素”）；
});

index.html

<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="font-select">
    <option value="16" selected>16 pixels</option>
    <option value="17">17 pixels</option>
    <option value="18">18 pixels</option>
    <option value="19">19 pixels</option>
    <option value="20">20 pixels</option>
</select>

16像素
17像素
18像素
19像素
20像素

添加字体大小21后选择器的选项：

字符串连接（

+

）就是您在这里寻找的内容

 $("#font-select").append("<option value=\"" + addedFont + "\">" + addedFont + " pixels </option>");

演示：

$（'#添加字体大小'）。单击（函数（）{
var addedFont=$（'#fontSizeInput'）.val（）
$（“#字体选择”）.append（新选项（addedFont+‘pixels'，addedFont））
})

#fontSizeInput{width:5em；}

16像素
17像素
18像素
19像素
20像素

px

添加字体大小

您需要使用字符串连接

$("#font-select").append('<option value="'+addedFont+'">' + addedFont + 'pixels </option>');

$（“#字体选择”）.append（“”+addedFont+“像素”）；

但是，我建议您使用jQuery创建元素

$("#font-select").append($('<option>', {value : addedFont, text:addedFont + " pixels"});

$（“#字体选择”）.append（$（''，{值：addedFont，文本：addedFont+“像素”}）；

您将变量括在双引号内，因此它被视为字符串而不是变量，如下所示

$("#font-select").append("<option value = "' + addedFont + '">" + addedFont + " pixels </option>");

$（“#字体选择”）.append（“+addedFont+”像素”）；

假设

addedFont

是一个变量

'addedFont pixels'

一个简单的校正

'+addedFont+'pixels'

整洁策略。我想补充一点，我认为OP对文本的意思是

addedFont+'pixels'

。

$("#font-select").append("<option value = "' + addedFont + '">" + addedFont + " pixels </option>");