0

I want to ask you, how can i implement an element into a pull down list with jQuery. I have the code below.

I want to implement an <option value="fiat">Fiat</option>"> element by clicking the button. However the code will not work. I also tried to use .html() and .replaceWith() functions, but it will not work too. Does someone an idea? 

$(document).ready(function(){ $("#btn1").click(function(){ $("select").append("<option value="fiat">Fiat</option>"); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi">Audi</option> </select> <button id="btn1">Add option element</button>

Improve this question
3
  • You want to append the option to the select tag not into a p tag so please use the select tag as JQuery selector not the p tag. Commented Jun 17, 2019 at 12:41
  • 2
    The problem is the mismatched quotes. Use ' to wrap the string and " inside the string: $("select").append('<option value="fiat">Fiat</option>'); Commented Jun 17, 2019 at 12:42
  • 1
    As Rory says, it's just a typo. Did you check your browser's Console for errors? The fact you just said it "will not work" without providing further details suggests probably not...learn to use the tools available to you in order to debug your application. Press F12 (on most browsers) to open the Developer Tools and look at the Console - and all the other powerful tools they provide. If you want to write browser code in JavaScript then you need to learn the key features of these tools, otherwise you'll have a hard time solving basic issues. Commented Jun 17, 2019 at 12:43

2 Answers 2

Reset to default
1

In your code

$(document).ready(function(){ $("#btn1").click(function(){ $("select").append("<option value="fiat">Fiat</option>"); }); });

you use double quote to determine what you intend to append. However, the double quote is closed just before the fiat, so the engine expects to have some JS code there, like closing the paranthesis and so on. You will need to either vary your String enclosings

'<option value="fiat">Fiat</option>'

use a template literal

`<option value="fiat">Fiat</option>`

or escape the double quotes inside your string

"<option value=\"fiat\">Fiat</option>"

EDIT

Appending a variable is not much more difficult, you can do it like this:

var options = ` <option value="first">First</option> <option value="second">Second</option> <option value="third">Third</option> `;

and then

$("select").append(options);

However, it is advisable to give an id or a class to your select and use that in your selector instead of a tag name unless you want to add the options for all select tags.

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

4 Comments

I have just one question: when i want to add mor than one element, say 3 element, can i write a var and insert to .append() just the name of the var - and how can i do this i practise. Can I write var cars = <option value="fiat">Fiat</option><option value="bmw">BMW</option> an than write into .append(cars)??? Is it possible?
@Student You are welcome. I have edited my answer with the answer to the question you asked here in the comment section.
Thank's a lot! Great example.
@Student I was happy to help.
0

You need to append the option to the select list and also you need to use single quotes around the string and the double quotes inside the string.

In the following snippet - if you open the select list - you will see that "Fiat" is not present - the n if you click the button - it is is added to the select list options as expected.

$(document).ready(function(){ $("#btn1").click(function(){ $("#mySelectList").append('<option value="fiat">Fiat</option>'); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="mySelectList"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="vw">VW</option> <option value="audi">Audi</option> </select> <button id="btn1">Add option element</button>

Improve this answer

3 Comments

I have just one question: when i want to add mor than one element, say 3 element, can i write a var and insert to .append() just the name of the var - and how can i do this i practise. Can I write var cars = <option value="fiat">Fiat</option><option value="bmw">BMW</option> an than write into .append(cars)??? Is it possible?
Yes, it's possible, and it's done exactly like you're written it
Yes, but i don't work! That's the reason why i write the question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.