添加变量名而不是变量值以选择列表

Question

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

main.js

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

的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>

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

Answer 1

您需要使用字符串连接。

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

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

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

Answer 2

字符串连接（+）就是你在这里寻找的。

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

但是，本着other clever answers的精神，我想介绍具有excellent browser support的令人惊讶的简单语法new Option(text, value)：

$('#font-select').append(new Option(addedFont + ' pixels', addedFont))

演示：

＆＃13;

＆＃13;

$('#add-font-size').click(function () {
  var addedFont = $('#fontSizeInput').val()
  $('#font-select').append(new Option(addedFont + ' pixels', addedFont))
})

＆＃13;

#fontSizeInput { width: 5em; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>


<!-- Demo Code -->
<hr>
<p><input id="fontSizeInput" type="number" value="21"> px</p>
<button id="add-font-size">Add Font Size</button>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您将变量括在双引号内，因此将其视为字符串而非变量，请使用此类

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