JavaScript disable option problemos sprendimas
Parašė ozzWANTED 2010 sausio 31 22:01:40

---

Situacija yra tokia, kad kurdami tinklapius privalome juos adaptuoti visoms naršyklėms.
Todėl, nesvarbu kad viskas veikia ant mūsų mėgstamo Firefox. Naršyklė, kuri šiuo metu palaiko daugiausiai HTML galimybių ir standartų, vienintelė praktiškai pilnai palaikanti CSS 3.0 standartą ir itin greit generuojanti JavaScript.
O problema yra ta, kad su problemomis susidurime tikrindami Opera naršyklėje. Tačiau bene labiausiai su jomis susiduriame senojoje gerojoje Internet Explorer.

Taigi - mūsų užduotis
[code]<select name='pasirk' id ='pas1' [color=red][b]onchange='updateOpts(this)'[/b][/color]>[/code]
kur onchange atributo dėka paslėptume kelis punktus iš pasirinkimų sąrašo.

Firefox viskas labai paprasta:
[code]if(hide == 1)
[b]forma[/b].options[2].style.display = 'none';
else
[b]forma[/b].options[2].style.display = 'block'; [/code]

Ir problemos nebėra.

Tačiau tai veikia tik FireFox.

Dabar problemą išspręsti naršyklei Opera ir kitoms bent kiek padoresnėms naršyklėms, galima primityviu bet veikiančiu būdu:
[code]forma.options[2].disabled = "disabled";[/code]
Tokie punktai dabar taps pilki ir nebepažymini.

Tačiau su didžiausia problema susiduriame tuomet, kai tą funkciją pabandome padaryti ant IE.
Problema ta, kad visos IE naršyklės, išskyrus naujausią, yra su bugu, apie kurį oficialiai pranešta čia:
http://webbugtrack.blogspot.com/2007/11/bug-293-cant-disable-options-in-ie.html
Kaip matome iš nuorodos, tai padaryta dar 2007'aisias buvo.

Tačiau Microsoft, šią problemą tesugebėjo išspręsti tik IE8 naršyklėje. T.y.
[code]<select>
<option>Aš geras</option>
<option>Aš geras</option>
[b] <option disabled="disabled">AŠ BLOGAS!</option>[/b]
<option>Aš geras</option>
</select>[/code]
triukas nesuveiks IE6 ir IE7 naršyklėse.

Todėl šią problemą IE6 ir IE7 naršyklėms išspręsti reikia pasitelkti papildomus metodus.
Mums tiesiog reikia naikinkti vaikus([b]removeChild[/b]) bei pridėti vaikus([b]appendChild[/b]). Na o visą mūsų elementų baseiną([i]elements pool[/i]) turime saugoti globaliose JavaScript sekose([i]arrays[/i]):
[code]var brokenPipe = ['a', 'b', 'c', ['ca', 'cb'], 'd', 'e'];[/code]

Tuomet reiktų generuoti sąrašą tokiu būdu:
1. Išvalome baseiną (ištriname visus pasirinkties sąrašo elementus) naudodamies [b]removeChild[/b] metodu
2. IF funkcijos pagalba pridedame naujus elementus po vieną į pasirinkčių sąrašą galą pradedant nuliniu elementu.

Pačios javascript funkcijos, supaprastinančios šį Jūsų darbą būtų tokios:
[code]function insertOptionBefore(num) {
var elSel = document.getElementById('selectX');
if (elSel.selectedIndex >= 0) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Insert' + num;
elOptNew.value = 'insert' + num;
var elOptOld = elSel.options[elSel.selectedIndex];
try {
elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew, elSel.selectedIndex); // IE only
}
}
}

function removeOptionSelected() {
var elSel = document.getElementById('selectX');
var i;
for (i = elSel.length - 1; i>=0; i--) {
if (elSel.options[i].selected) {
elSel.remove(i);
}
}
}

function appendOptionLast(num) {
var elOptNew = document.createElement('option');
elOptNew.text = 'Append' + num;
elOptNew.value = 'append' + num;
var elSel = document.getElementById('selectX');
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}

function removeOptionLast() {
var elSel = document.getElementById('selectX');
if (elSel.length > 0)
{
elSel.remove(elSel.length - 1);
}
}[/code]

Specifiškai pagal savo poreikius šias funkcijas manau jau sugebėsite persidaryti.
Tačiau svarbu įsidėmėti, kad dėl IE veikimo keblumų būtina naudoti klaidų valdymo mechanizmą [b]try{} catch(ec){}[/b]. Kadangi IE įdės elementą sėkmingai be antrojo add() parametro.

Kaip atrodo vizualiai visa tai, galite peržiūrėti čia:
http://javascript.internet.com/forms/add-remove-options.html

---
Dar papildomai tokį vieną kodą pateiksliu, skirtą sukurti pasirinkimų([i]options[/i]) sąrašą iš elementų sekos javascript pagalba:
[code]// Šalių ir miestų sąrašas
var countriesAndCites = new Array ();
countriesAndCites['Australija'] = ['Brisbane', 'Melbourne', 'Sydney'];
countriesAndCites['Anglija'] = ['Liverpool', 'London', 'Manchester'];

// Tarkim paimame kažkokį įrašą
var country = 'Anglija';

// Pridėti naują pasirinkimą
var countryArray = countriesAndCites[country];

if (countryArray) {
for (var i=0; i < countryArray.length; i++) {
var option = new Option (countryArray[i], i);
musuFormosSELECTAS.options.add (option);
}
} [/code]

[b][color=green]Parengė @ozzWANTED
2010 01 31 © PhpFusion-Lt.com[/color][/b]