Blog
Web development: Dynamické nabídky - selecty
| Zobrazit obsah | Zobrazit komentáře | Zobrazit pouze komentáře
|
Tímto zápisem si vysvětlíme, jak se vytvářejí dynamické nabídky, které jsou
složené ze dvou elementů typu select. Jedná se o relativně známý
případ, kdy se podle volby v první nabídce mění obsah nabídky druhé. Viděl jsem
již několik řešení, realizovaná na straně serveru, většinou v PHP, což mně
přijde vcelku zbytečné. Jak tento problém realizovat na straně klienta, tedy
pomocí JavaScriptu, je popsáno dále.
Odkaz
na ukázkový kód.
comboBoxes-page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <title>KAVALEK.NET - Combo Boxes</title> <script src="comboBoxes.js" type="text/javascript"></script> </head> <body> <h1>Dynamic combo boxes - HTML select element</h1> <div> <select id="comboBox_Root" onchange="loadChildBox();"> <option value="0">N/A</option> <option value="1">Nabidka 1</option> <option value="2">Nabidka 2</option> <option value="3">Nabidka 3</option> </select> </div> <br /> <div> <select id="comboBox_Child"> <option value="0">N/A</option> </select> </div> </body> </html>
comboBoxes.js
/* Child combo box values definiton */
var comboBoxChildValues = new Array(
new Array("N/A"),
new Array(
"Polozka 1 1",
"Polozka 1 2",
"Polozka 1 3",
"Polozka 1 4",
"Polozka 1 5",
"Polozka 1 6"),
new Array(
"Polozka 2 1",
"Polozka 2 2",
"Polozka 2 3"),
new Array(
"Polozka 3 1",
"Polozka 3 2",
"Polozka 3 3",
"Polozka 3 4"));
/* Main function */
function loadChildBox() {
var comboBoxRoot = document.getElementById('comboBox_Root');
var comboBoxChild = document.getElementById('comboBox_Child');
var selectedIndex = comboBoxRoot.selectedIndex;
var selectedValue = comboBoxRoot.options[selectedIndex].value;
comboBoxChild.options.length = 0;
for(i = 0; i < comboBoxChildValues[selectedValue].length; i++) {
comboBoxChild.options[i] = new Option(comboBoxChildValues[selectedValue][i],
comboBoxChildValues[selectedValue][i]);
}
}
Jak to funguje
V souboru comboBoxes.js nadefinujeme do dvourozměrného pole
comboBoxChildValues obsah druhé nabídky. V tomto příkladě
je počítáno s tím, že parametr value, který je předán funkcí
loadChildBox() při události onchange, je číslo
v intervalu 0...n, což odpovídá indexům pole. Pokud bychom
chtěli používat jiné hodnoty a tím tedy i jiné indexy v poli, bylo by potřeba
upravit inicializaci následujícím způsobem.
var comboBoxChildValues = new Array();
comboBoxChildValues["a"] = new Array("N/A");
comboBoxChildValues["b"] = new Array(
"Polozka 1 1",
"Polozka 1 2",
"Polozka 1 3",
"Polozka 1 4",
"Polozka 1 5",
"Polozka 1 6");
comboBoxChildValues["c"] = new Array(
"Polozka 2 1",
"Polozka 2 2",
"Polozka 2 3");
comboBoxChildValues["d"] = new Array(
"Polozka 3 1",
"Polozka 3 2",
"Polozka 3 3",
"Polozka 3 4");
Samotná funkce pak už jen spočívá v projití toho řádku pole, který je dán
právě identifikátorem value, v kódu zastoupen proměnnou
selectedValue, a "naplnění" druhé nabídky funkcí
Option(). Důležitým příkazem je
comboBoxChild.options.length = 0;, který druhou nabídku
"resetuje" a Option ji znovu naplní. Kdyby nebylo použito této
konstrukce, Option by pouze přepsal existující prvky a případně
rozšířil. Chybu bychom zaznamenali, kdyby bylo potřeba do druhé nabídky
nejprve vložit např. deset položek a při události onchange
aktualizovat na pět. Výsledkem by bylo očekávaných pět položek, které by však
následovalo předchozích pět položek na pozici 5 – 10.
Jako vždy složitě popsáno, avšak doufám, že pochopeno.
Komentáře k tématu 'Dynamické nabídky - selecty' (2 komentáře)
