How to add an option to HTML select using jQuery

Question

I have a html select like:

<select id="airports-sel">
      <option data-group="1" value="1">Madrid–Barajas</option>
      <option data-group="1" value="2">Torrejón de Ardoz Airport</option>
      <option data-group="2" value="3">Milan-Malpensa</option>
      <option data-group="2" value="4">Milan-Linate</option>
</select>

I need to add a new airport to this select using jQuery, I try to use the following code but it's not working:

$('#airports-sel').append($('<option>', {
      value: 5,
      text: Paris-Orly Airport,
      data-group: 3
}));

This works without "data-group" but it's very important to me to have the data-group set on every option, can you please provide an example of how can I do this?

Angel Politis · Accepted Answer · 2018-01-28 18:19:10Z

2

Your code has a couple of problems:

You don't use strings correctly; strings must be enclosed in quotes.
You use a hyphen-separated key in your object which must also be enclosed in quotes, or you'll get a syntax error.

Code:

$('#airports-sel').append($('<option>', {
      value: 5,
      text: "Paris-Orly Airport",
      "data-group": 3
}));

edited Jan 28, 2018 at 18:19

answered Jan 28, 2018 at 18:13

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

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

2 Comments

The Alpha Over a year ago

Why down voted this answer? This is correct one and it's not a duplicate as mentioned in comment.

The Alpha Over a year ago

@Alex, if it solves your problem then you should accept the answer.

Morteza · Accepted Answer · 2018-01-28 18:30:22Z

0

Hope it helps!

     $("#airports-sel").append("<option data-group=3 value='>Paris-Orly Airport</option>");

answered Jan 28, 2018 at 18:30

Morteza

1916 silver badges14 bronze badges

Comments

Areej.Fatima · Accepted Answer · 2018-01-28 18:37:17Z

0

You can add option by simply writing following code in jquery.

$("#airports-sel").append("<option data-group='3' value='5'>Paris-Orly Airport</option>");

answered Jan 28, 2018 at 18:37

Areej.Fatima

11 bronze badge

Collectives™ on Stack Overflow

How to add an option to HTML select using jQuery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related