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,
);

Wartość dziesiętna

Mamy liczbę: 1.456 i chcemy pobrać wartość dziesiętną z tej liczby, czyli: *0.456". Jak to można zrobić?

Wartość można pobrać za pomocą operatora: %, w taki sposób:

1.456 % 1

Problem jest taki, że zwróci: 0.45599999999999996

Można to napisać tak:

+(1.456 % 1).toFixed(3)

Zwróci: 0.456

Za pomocą toFixed wyświetlamy liczbę z dokładnością do n miejsc po przecinku. Ponieważ toFixed zwraca wprawdzie liczbę, ale w postaci stringa, warto rzutować ją na liczbę za pomocą operatora +.

A co jeśli potrzebujesz się dowiedzieć, jaka jest wartość na drugim miejscu po przecinku?

Na przykład dla liczby: 2.52. Przykład:

+(2.52 % 0.1).toFixed(2)

Zwróci: 0.02

W lutym opublikowałem 2 wpisy:

Inne:

1. Czym jest złożoność cyklomatyczna?

JavaScript:

1. Jak sprawdzić, czy tablica zawiera duplikaty?

Przeczytałem 2 książki:

1. Wstrzykiwanie zależności — Steven Van Deursen, Mark Seemann
2. Malarz świata ułudy — Kazuo Ishiguro

Przesłuchałem 5 audiobooków:

1. Królowa — Elżbieta Cherezińska
2. Tryumf Lisa Reinicke — Andrzej Pilipiuk
3. Pan Lodowego Ogrodu. Tom 1 — Jarosław Grzędowicz
4. Czwarte skrzydło — Rebecca Yarros
5. Ciemność — Jozef Karika