Mini porady jQuery III - formularze - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

Mini porady jQuery III – formularze

Listopad 19th, 2015

Dominik-W

Witamy w kolejnym artykule z serii mini porady jQuery. Dziś zajmiemy się wybranymi aspektami pracy z elementami formularzy.

1. Nie więcej niż jedna opcja możliwa do zaznaczenia w input select multiple

Ostatnio tworzyłem projekt, gdzie trzeba było pokazać UI w nieco staroświeckim stylu (podobnym do typowych aplikacji desktop sprzed lat). Niektóre z inputów musiałby być pokazane jako listy select multiple, jednak wybieranie więcej niż jednej opcji jednocześnie było zabronione.

Na szczęście nie trzeba pisać żadnej obsługi w JS – z pomocą jQuery jest to trywialne do zrobienia:

// allow only one item to select
$('#my-options').removeAttr('multiple');

W ten sposób usuwamy możliwość wybrania więcej niż jednej opcji, jednak nasz element nadal pozostaje wyświetlany jako select multiple.

2. Jak pobrać ID oraz wartość zaznaczonej opcji w takim elemencie select multiple?

Obsługa jest prosta do napisania, choć można to zrobić na wiele sposobów. Ja preferuję tę, z użyciem jQuery:

$("#my-items").on("click", function() {
  var val = $("#my-items option:selected").val();
  var text = $("#my-items option:selected").text();

  // ...
});

Działa i to bez niespodzianek w IE.

Zobaczmy teraz jak całkiem prosto możemy zaimplementować funkcjonalność przenoszenia opcji pomiędzy inputami typu select multiple (z możliwością wyboru wielu opcji jednocześnie) w obu kierunkach.

3. Transfer opcji pomiędzy inputami typu select multiple

Załóżmy że mamy obok siebie 2 inputy typu select multiple. Po lewej np. kategorie do wybrania, po prawej – kategorie do zablokowania. Zadanie wybierania / blokowania opcji wykonuje się błyskawicznie poprzez przenoszenie opcji do odpowiedniego elementu input select.

Przeniesione opcje z elementu po lewej znikają z niego, pojawiają się natomiast w elemencie po prawej stronie. I vice-versa.

Funkcjonalność przenoszenia jest w gruncie rzeczy prosta do zaimplementowania. Zakładamy że pomiędzy inputami (z ID „include” i „exclude”) mamy 2 przyciski (np. strzałki z ID „left-btn” i „right-btn”), które inicjują przenoszenie zaznaczonych opcji:

// move from left to right
$('#left-btn').click(function() {
  !$('#include option:selected').remove().appendTo('#exclude');

  reArrangeRight();
  
  return;
});

// move from right to left
$('#right-btn').click(function() {
  !$('#exclude option:selected').remove().appendTo('#include');

  reArrangeLeft();

  return;
});

Zwróćmy uwagę na funkcje reArrange. Zostały dodane, ponieważ warto jest posortować opcje, aby były wyświetlane alfabetycznie, bez bałaganu.

Oto implementacja tych funkcji – korzystamy z metody sort():

function reArrangeLeft() {
  $("#include").html($("#include option").sort(function(a, b) {
    return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
  }));
}

function reArrangeRight() {
  $("#exclude").html($("#exclude option").sort(function(a, b) {
    return a.text === b.text ? 0 : a.text < b.text ? -1 : 1;
  }));
}

Po wywołaniu, funkcje te posortują elementy w danym inpucie typu select.

4. Pobierz wszystkie zaznaczone elementy typ input checkbox

To rozwiązanie pokazuje, jak pobrać wszystkie zaznaczone check-boxy znajdujące się w określonym elemencie np. div:

var active = $("#my-div input[class=xyz]:checked").map(function() {
  return this.id;
}).get().join(",");

Zakładamy tutaj jedynie, że elementy checkbox mają nadaną klasę CSS „xyz”, ponieważ według niej są rozpoznawane. Zwracana jest wartość id każdego zaznaczonego elementu i sklejana metodą join() jako ciąg oddzielony przecinkami. Taką wartość możemy np. wysłać poprzez Ajax i przetworzyć.

Polecamy także poprzednie artykuły z serii Mini porady jQuery:

http://javascript-html5-tutorial.pl/mini-porady-javascript-i-jquery.html

http://javascript-html5-tutorial.pl/mini-porady-javascript-i-jquery-2.html

Miłej zabawy z jQ!