
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!