Pri práci na jednej webovej aplikácii mi zadávateľ spomenul rozšírené vyhľadávanie na
Profesia.sk - chcel, aby sa pôvodné <input type="checkbox"> výbery nahradili týmto spôsobom, je už na to zvyknutý.
Pozrel som si teda ich kód, ale keďže kradnúť sa nemá a oni ho majú naozaj zložitý, povedal som si, že si napíšem vlastný, s mierne obmedzenou funkcionalitou. Nie všetko som totiž potreboval.
A tak sa (dnes, okolo tretej ráno) zrodil
"Pohodlný výber".
Je to založené na tom, že z jedného multiple <select> prostredníctvom tlačidla prenesieme položky do druhého. Pri odoslaní formuláru sa tento druhý spracuje a odošlú sa všetky položky, ktoré obsahuje.
Má to niekoľko fíčŕz, ktoré teraz nejak vysvetlím:
- keďže predchádzajúca verzia formuláru pracovala s <input type="checkbox">, nechcel som meniť formát GET požiadavku na serverový skript (aby som nemusel meniť aj ten). Preto je to spracovanie také aké je a určite sa dá zlepšiť
- doubleclick funguje len vo Firefoxe a len jedným smerom, niekde tam bude malá chybka, malo by to fungovať v oboch smeroch
- možno sa vám zdá, že tie funkcie obsahujú veľa chaotických parametrov: robil som to fakt neskoro a navyše, vzniklo to z dôvodu rozšírenia a použitia viacerých pohodlných výberov v jednom formulári
- možnosti sa neradia podľa toho, ako boli vygenerované, ale podľa toho, aká bola posledná zmena (tj. keď premiestnim vpravo prvú položku, a potom vrátim späť vľavo, zaradí sa na posledné miesto, nie na prvé)
- treba definovať pole inData, ktoré obsahuje údaje o všetkých pohodlných výberoch v jednom formulári vo formáte "id_praveho_selectu,id_divu_so_spracovanymi_polozkami,nazov_vystupneho_pola". Toto pole sa použije pri spracovaní všetkých pohodlných výberov vo formulári.
Celý proces funguje tak, že človek si vyberie príslušné položky (na presun je funkcia move(smer[left/right], id_laveho_selectu, id_praveho_selectu)),
po kliknutí na odosielacie tlačítko sa formulár spracuje (všetky položky z pravého selectu sa zoberú a v dive pracovne nazvanom "inserter" sa vytvoria cez innerHTML skryté formulárové polia s patričnými názvami a hodnotami) a nakoniec sa odošlú len vytvorené skryté polia.
Ak by ste mali záujem niečo poopraviť (v JS nie som bohvieaký expert), alebo rozšíriť, kľudne to robte, budem rád, ak ma o tom budete informovať.
Ak by ste to chceli použiť, nech sa páči, na to som to sem dal. A ak by ste mali akékoľvek postrehy, nech sa páči, táto téma je tu na to.
Ešte pridám nejaký ten kód rovno sem:
Kód:
<html>
<head>
<script>
function move(dir, lft, rgt){
if(dir == 'right'){
var from = document.getElementById(lft);
var to = document.getElementById(rgt);
var reversed = 'left';
} else if (dir == 'left') {
var from = document.getElementById(rgt);
var to = document.getElementById(lft);
var reversed = 'right';
} else {
return false;
}
for (var i = 0; i < from.length; i++){
var opt_from = from.options[i];
if (opt_from.selected) {
var isSet = false;
for (var j = 0; j < to.length; j++){
var opt_to = to.options[j];
if(opt_from.value == opt_to.value){
isSet = true;
}
}
if (!isSet){
var y=document.createElement('option');
y.text= opt_from.text;
y.value = opt_from.value;
y.setAttribute("ondblclick", "move('"+reversed+"', '"+lft+"', '"+rgt+"');");
try
{
to.add(y,null); // standards compliant
}
catch(ex)
{
to.add(y); // IE only
}
from.remove(i);
i = i - 1;
}
}
}
}
function analyzeForm(input){
for (var i = 0; i < input.length; i++){
var newarr = input[i].split(',');
var rgt = newarr[0];
var ins = newarr[1];
var code = newarr[2];
var sel = document.getElementById(rgt);
var errStr = "";
if (sel.length == 0){
errStr = 'Prosím, vyberte aspoň jednu položku!';
} else {
var inputzz = "";
for (var u = 0; u < sel.length; u++){
var x = sel.options[u].value;
inputzz = inputzz + "<input type='hidden' name='"+code+"["+x+"]' value='on'> ";
}
document.getElementById(ins).innerHTML = inputzz;
}
}
if(errStr == ""){
return true;
} else {
alert(errStr);
return false;
}
}
</script>
</head>
<body>
<script>
var inData =new Array(2);
inData[0]='n_right,n_inserter,n';
</script>
<form method="get" action="" onSubmit="return analyzeForm(inData);" name="switcher">
<fieldset>
<legend>Vyberte si svoje nápoje</legend>
<table>
<thead>
<tr>
<th scope="col">Nápoje</th>
<td></td>
<th scope="col">Vybrané nápoje</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select multiple="multiple" size="15" id="n_left">
<option value="kava" ondblclick="move('right', 'n_left', 'n_right');">Káva</option>
<option value="caj" ondblclick="move('right', 'n_left', 'n_right');">Čaj</option>
<option value="cola" ondblclick="move('right', 'n_left', 'n_right');">Cola</option>
<option value="pivo" ondblclick="move('right', 'n_left', 'n_right');">Pivo</option>
<option value="vino" ondblclick="move('right', 'n_left', 'n_right');">Víno</option>
<option value="rum" ondblclick="move('right', 'n_left', 'n_right');">Rum</option>
</select>
</td>
<td>
<input type="button" value=" >> " onclick="move('right', 'n_left', 'n_right');">
<br>
<input type="button" value=" << " onclick="move('left', 'n_left', 'n_right');">
</td>
<td>
<select multiple="multiple" size="15" id="n_right">
</select>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<noscript>
Nemáte zapnutú podporu JavaScriptu.<br>Tento formulár nebude správne fungovať.
<br>
</noscript>
<div id="n_inserter">
</div>
</td>
</tr>
</tbody>
</table>
</fieldset>
<input type="submit" value="Odoslať objednávku do baru a do kuchyne">
</form>
</body>
</html>
A. S. Tanenbaum píše:
The terms LF, MF, and HF refer to low, medium, and high frequency, respectively. Clearly, when the names were assigned, nobody expected to go above 10 MHz, so the higher bands were later named the Very, Ultra, Super, Extremely, and Tremendously High Frequency bands. Beyond that there are no names, but Incredibly, Astonishingly, and Prodigiously high frequency (IHF, AHF, and PHF) would sound nice.
Chválim...
