JavaScript: Jak dodać opcję do listy?

Dodawanie opcji do listy

Opcję do listy w JavaScript można dodać na kilka sposobów.

Zakładam, że lista jest już stworzona:

<select id="myList"></select>

W tym wpisie opiszę dwa sposoby:

Sposób 1: createElement

const option = document.createElement('option');
option.text = 'Option 1';
option.value = '1';

const select = document.getElementById('myList');
select.add(option);

Sposób 2: Option

const option = new Option('Option 1', '1');

const select = document.getElementById('myList');
select.add(option);

Dodatkowo Option umożliwia zaznaczenie danej opcji jako domyślną.

Konstruktor wygląda tak:

Option(text, value, defaultSelected, selected)

Pierwsze dwa parametry to odpowiednio: etykieta opcji i jej wartość.

Trzeci parametr: defaultSelected jeśli jest ustawiony na true sprawi, że nada określonej opcji atrybut: selected.

Przykład:

new Option('Option 1', '1', true)

Stworzy:

<option value="1" selected="">Option 1</option>

Ale uwaga! Ta opcja nie będzie domyślnie zaznaczona.

Jeśli chcesz zaznaczyć jakąś opcję, musisz przekazać true do czwartego parametru:

new Option('Option 1', '1', false, true)