SCR19: Az onchange esemény és a kiválasztás elem együttes használata a tartalom megváltoztatása nélkül
Alkalmazás
A szkripteket támogató HTML és XHTML. Ez a technika a JavaScript 1.4 try/catch verzióját alkalmazza.
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
Ezt a technikát a Windows XP operációs rendszeren futó JAWS 7.0-val és WindowEyes 5.5-el tesztelték a Firefox 1.5 és IE 6-os böngésző verziókkal. Fontos, hogy a böngészőkben aktiválni kell a JavaScript támogatást.
Leírás
A technika célja annak bemutatása, hogyan lehet az onchange esemény és a kiválasztás elem segítségével a weboldal egyéb elemeit frissíteni. A technika alkalmazása nem eredményezi a technika megváltozását. Abban az esetben, ha a weboldalon egy vagy több kiválasztás elem is szerepel, és legalább az egyiken onchange esemény került beállításra, akkor az képes megváltoztatni a weboldalon lévő más kiválasztás elemek opcióit. A kiválasztás elemekhez szükséges összes információ szerepel az adott weblapon.
Fontos megjegyezni, hogy a módosított kiválasztás elem a weboldal olvasási sorrendjében a saját vezérlőjele után áll. Ez biztosítja azt, hogy a segítő technológiák érzékelni fogják a módosítást, és a megváltoztatott elemre történő fókuszálás esetén, a felhasználó már a módosított elemet fogja látni. Ez a technika a felhasználói program JavaScript támogatásán alapszik.
Példák
1. példa
Az alábbi példa két kiválasztás elemet tartalmaz. Az első kiválasztása esetén a második kiválasztás lehetőségei annak megfelelően módosulnak. Az első kiválasztási elem a kontinensek listáját tartalmazza. A második kiválasztási elem alatt a kiválasztott kontinensen elhelyezkedő országok részleges listája található. A kontinens választó elemén egy onchange elem került alkalmazásra. A kontinens kiválasztás megváltozásakor az ország kiválasztás, a JavaScript segítségével, a dokumentum objektum modellen (DOM) keresztül módosul. A weboldal tartalmazza az összes szükséges adatot mind a kontinensekről, mind az országokról.
Az alábbiakban a kódok áttekintése olvasható:
-
Beállítható countryLists elrendezés, amely tartalmazza a kiválasztás elem vezérlőjelében található összes kontinens országainak listáját.
-
A kontinens választó elem onchange eseménye által aktivált countryChange() funkció.
-
A weblap body elemében található kiválasztás elemet létrehozó XHTML kód.
Példa kód:
<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
<title>Dynamic Select Statements</title>
<script type="text/javascript">
//<![CDATA[
// array of possible countries in the same order as they appear in the country selection list
var countryLists = new Array(4)
countryLists["empty"] = ["Select a Country"];
countryLists["North America"] = ["Canada", "United States", "Mexico"];
countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"];
countryLists["Asia"] = ["Russia", "China", "Japan"];
countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"];
/* CountryChange() is called from the onchange event of a select element.
* param selectObj - the select object which fired the on change event.
*/
function countryChange(selectObj) {
// get the index of the selected option
var idx = selectObj.selectedIndex;
// get the value of the selected option
var which = selectObj.options[idx].value;
// use the selected option value to retrieve the list of items from the countryLists array
cList = countryLists[which];
// get the country select element via its known id
var cSelect = document.getElementById("country");
// remove the current options from the country select
var len=cSelect.options.length;
while (cSelect.options.length > 0) {
cSelect.remove(0);
}
var newOption;
// create new options
for (var i=0; i<cList.length; i++) {
newOption = document.createElement("option");
newOption.value = cList[i]; // assumes option string and value are the same
newOption.text=cList[i];
// add the new option
try {
cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE
}
catch (e) {
cSelect.appendChild(newOption);
}
}
}
//]]>
</script>
</head>
<body>
<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
<h1>Dynamic Select Statements</h1>
<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this);">
<option value="empty">Select a Continent</option>
<option value="North America">North America</option>
<option value="South America">South America</option>
<option value="Asia">Asia</option>
<option value="Europe">Europe</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
</body>
</html>
A Dynamic Select című részben található egy működő példa.
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Kapcsolódó technikák
(jelenleg nincsenek)
Ellenőrzések
Folyamat
-
Navigáljon a kiválasztás elem vezérlőjeléhez (ebben a példában a kontinens választó elem) és változtassa meg a kiválasztás értékét.
-
Navigáljon a vezérlőjel által frissített kiválasztás elemhez (ebben az esetben az ország választó elem).
-
Ellenőrizze, hogy a megegyező opciók megjelenítésre kerülnek-e a másik kiválasztási elemben.
-
Navigáljon a kiválasztás elem vezérlőjeléhez és az értékük megváltoztatása nélkül tekintse át az opciókat.
-
Ellenőrizze, hogy a megegyező opciók továbbra is megjelenítésre kerülnek-e a társított elemben.
A kiválasztási elemeket egy segítő technológiával is ajánlatos ellenőrizni, annak a megállapítására, hogy a társított elem is felismerésre kerül-e.
Elvárható eredmények
-
A 3. és 5. pontok igazak.