W kwietniu opublikowałem 1 wpis:

MySQL:

1. Jak wyświetlić zapytanie tworzące widok?

Przeczytałem 1 książkę:

1. Kiedy byliśmy sierotami — Kazuo Ishiguro

Przesłuchałem 3 audiobooków:

1. Pan Lodowego Ogrodu. Tom 2 — Jarosław Grzędowicz
2. Czas porzucenia — Elena Ferrante
3. Turniej cieni — Elżbieta Cherezińska

Kod widoku

Aby wyświetlić zapytanie widoku, zaloguj się do MySQL i wywołaj komendę:

show create view nazwa-widoku

W marcu opublikowałem 4 wpisy:

JavaScript:

1. Jak pobrać wartość dziesiętną z liczby?
2. Jak pobrać zaznaczone opcje z listy?
3. Jak dodać opcję do listy?

Narysowałem 1 komiks:

1. Refactoring

Przeczytałem 2 książki:

1. FUTU.RE — Dmitry Glukhovsky
2. Mężczyźni bez kobiet — Haruki Murakami

Przesłuchałem 8 audiobooków:

1. Różaniec — Rafał Kosik
2. Oko jelenia. Sfera Armilarna — Andrzej Pilipiuk
3. Oko jelenia. Sowie zwierciadło — Andrzej Pilipiuk
4. Pompeje — Robert Harris
5. Konklawe — Robert Harris
6. Wiek zła — Deepti Kapoor
7. Ziemiomorze. Grobowce Atuanu — Ursula K. Le Guin
8. Rebeka — Daphne Du Maurier

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)

Lista i wiele opcji

Mając listę rozwijaną wielokrotnego wyboru:

<label for="colour">What is your favourite colour?</label>
<br />
<select id="colour" name="colour" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="other">Other</option>
</select>
<br />
<button name="send" id="send">Send</button>

Potrzebujesz pobrać opcje zaznaczone przez użytkownika.

Jak to zrobić w JavaScript?

Obiekt HTMLSelectElement ma atrybut o nazwie: selectedOptions, który zwraca listę obiektów: HTMLOptionElement. Są to wszystkie zaznaczone opcje na liście.

select.selectedOptions

Wiedząc, że dane z selectedOptions to lista obiektów typu HTMLOptionElement, wystarczy iterować po każdym elemencie z tej listy i pobrać wartość z atrybutu value:

const selectedOptions = select.selectedOptions.map(option => option.value);

Hmm, nie! To nie przejdzie, ponieważ selectedOptions to obiekt.

Żeby wyłuskać te dane, można skorzystać z Array.from:

const select = document.getElementById('colour');
const sendBtn = document.getElementById('send');

sendBtn.addEventListener(
  "click",
  () => {
    const selectedOptions = Array.from(select.selectedOptions).map(option => option.value);
    console.log('selectedOptions: ', selectedOptions)
  },
  false,
);