wtorek, 2021-11-30

JS: Powiązane pola select

Czasami opcje dostępne w formularzu są mocno zależne od wcześniej dokonanego wyboru, dzięki językowi JavaScript w takim przypadku można trochę ułatwić zadanie użytkownikowi.

Kod HTML

Kod HTML to standardowy formularz z trzema elementami select. Wartości wybierane w pierwszym z nich (atrybut value) to identyfikatory (atrybut id) odpowiednich kolejnych pól wyboru. Na przykład po wybraniu zawodu technik informatyk, pierwsze pole select ma wartość ti. Element select z identyfikatorem ti zawiera przedmioty związane z zawodem technik informatyk.

<form name="technikum" action="">
  <select name="klasa">
	<option value="ti">technik informatyk</option>
	<option value="tr">technik reklamy</option>
  </select>
  <select name="ti" id="ti">
	<option value="sk">Sieci komputerowe</option>
	<option value="so">Systemy operacyjne</option>
  </select>
  <select name="tr" id="tr">
	<option value="kr">Kampania reklamowa</option>
	<option value="pr">Produkcja reklamy</option>
  </select>
</form>

Kod JavaScript

Funkcja chain() przyjmuje dwa argumenty. Pierwszym z nich (elID) jest identyfikator (atrybut id) elementu, który ma zostać wyświetlony. Drugi argument to zbiór elementów (elements). Po wywołaniu funkcji każdy element ze zbioru otrzymuje własność CSS display ustawioną na wartość none. Jedynym wyjątkiem jest element o atrybucie id zgodnym z pierwszym argumentem, przypisanie „pustej” wartości własności display oznacza, że usuwana jest wartość ustawiona przez JavaScript.

Po załadowaniu strony do funkcji chain() przekazane zostaje aktualna wartość pierwszego pola select (document.technikum.klasa.value) oraz wszystkie elementy typu select z formularza o atrybucie name równym technikum (document.technikum), które mają atrybut id (selektor CSS select[id]). W efekcie widoczne jest pole wyboru zgodne ze wskazanym w pierwszej kontrolce przedmiotem. W przypadku zmiany wyboru w pierszem polu, do funkcji chain() przekazana zostaje aktualna wartość pola oraz dokładnie ten sam zbiór elementów, jak podczas załadowania strony (document.technikum.querySelectorAll('select[id]')).

function chain(elID, elements) {
  for(let i = 0; i < elements.length; i++) {
	elements[i].style.display = (elID != elements[i].id ? 'none' : '');
  }
}
window.addEventListener('load', function() {
  chain(document.technikum.klasa.value, document.technikum.querySelectorAll('select[id]'));
  document.technikum.klasa.addEventListener('change', function() {
    chain(this.value, document.technikum.querySelectorAll('select[id]'));
  })
});