如何使用jQuery向HTML选择添加选项

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?

Answer 1

Your code has a couple of problems:

1. You don't use strings correctly; strings must be enclosed in quotes.
2. 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
}));

Answer 2

希望能帮助到你！

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

Answer 3

您可以通过在jquery中编写以下代码来添加选项。

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