Adding variable name instead of value of variable to select list

Question

I'm trying to add new options to the select tag, but my code is adding the variable name addedFont instead of the actual number (i.e. 20 pixels)

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>

Selector's options after adding font size 21:

Assuming addedFont is a variable '<option value="'+addedFont+'"> addedFont pixels </option>' — Satpal
– Satpal, Commented Feb 28, 2017 at 6:38
a simple correction '<option value = "'+addedFont+'">'+ addedFont+' pixels </option>' — Sandeep Garg
– Sandeep Garg, Commented Feb 28, 2017 at 6:41

Satpal · Accepted Answer · 2017-02-28 07:11:45Z

2

You need to use string concatenation.

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

However, I would recommend you to create element using jQuery

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

edited Feb 28, 2017 at 7:11

answered Feb 28, 2017 at 6:41

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gyre Over a year ago

Neat strategy. Just would like to add that I think OP meant addedFont + ' pixels' for the text, rather than the literal 'addedFont pixels'.

RAUSHAN KUMAR · Accepted Answer · 2017-02-28 06:47:02Z

0

You are enclosing the variable inside the double quotes so it is treated as a string not a variable, use like this

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

answered Feb 28, 2017 at 6:47

RAUSHAN KUMAR

6,0345 gold badges37 silver badges70 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:53:55Z

String concatenation (+) is what you were looking for here.

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

However, in the spirit of other clever answers, I would like to introduce the surprisingly simple syntax new Option(text, value) which has excellent browser support:

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

Demo:

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

#fontSizeInput { width: 5em; }

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

Collectives™ on Stack Overflow

Adding variable name instead of value of variable to select list

3 Answers 3

1 Comment

Comments

Demo:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Demo:

Comments

Your Answer

Sign up or log in

Post as a guest

Related