Zdravím, mám problém, ktorý neviem prelusknúť. Predpokladám, že pôjde o nejakú drobnosť. Mám v HTML jeden select box s 3 položkami. Od option, ktorú si návštevník vyberie je závislá CSS vlastnost
display konkrétneho divu. Jednoduchý princíp, uvidíte ho v kóde nižšie. Táto funkcia funguje. Zároveň mám cez ďalšiu funkciu prispôsobený vzhľad týchto select boxov. Tá funkcia sama o sebe funguje tiež, ale keď sú na jeden select box naviazané obe funkcie tak sa to niekde žuje a nejde to. Budem vďačný každému kto sa na to pozrie.
HTMLKód:
<select name="druh" id="druh_receptu" class="styled">
<option value="0">Múčniky</option>
<option value="1">Dezerty</option>
<option value="2">Šaláty</option>
</select>
<div id="recept_mucnik">
Text receptu
</div>
<div id="recept_dezert">
Text receptu
</div>
<div id="recept_salat">
Text receptu
</div>
<script type="text/javascript">
FormFields.init();
CustomForm.init();
</script>
Kód:
#recept_dezert, #recept_mucnik, #recept_salat {
display: none;
}
JavaScript pre stylovanie Select BoxovKód:
var CustomForm =
{
init: function()
{
var selectElements = document.getElementsByTagName("select"), span = Array(), textnode, option, active;
for(var i = 0; i < selectElements.length; i++)
{
if(selectElements[i].className == "styled")
{
var option = selectElements[i].getElementsByTagName("option");
var active = option[0].childNodes[0].nodeValue;
var tnode = document.createTextNode(active);
for(var j = 0; j < option.length; j++)
{
if(option[j].selected == true)
{
var tnode = document.createTextNode(option[j].childNodes[0].nodeValue);
}
}
span[i] = document.createElement("span");
span[i].className = "select";
span[i].id = "select" + selectElements[i].name;
span[i].appendChild(tnode);
selectElements[i].parentNode.insertBefore(span[i], selectElements[i]);
if(!selectElements[i].getAttribute("disabled"))
{
selectElements[i].onchange = CustomForm.choose;
}
else
{
selectElements[i].previousSibling.className = selectElements[i].previousSibling.className += " disabled";
}
}
}
},
choose: function()
{
option = this.getElementsByTagName("option");
for(var k = 0; k < option.length; k++)
{
if(option[k].selected == true)
{
document.getElementById("select" + this.name).childNodes[0].nodeValue = option[k].childNodes[0].nodeValue;
}
}
},
};
JavaScript pre zobrazovanie divovKód:
var FormFields =
{
init: function()
{
// vymedzenie select boxu, ktory vyvolava zmeny
var selectBox = document.getElementById("druh_receptu");
selectBox.onchange = FormFields.showFields;
},
showFields: function()
{
var box = document.getElementById("druh_receptu");
// vymedzenie divov s premenlivou display vlastnostou
var mucnik = document.getElementById("recept_mucnik");
var dezert = document.getElementById("recept_dezert");
var salat = document.getElementById("recept_salat");
// priradenie kazdej hodnote select boxu seriu vlastnosti pre divy
if(box.value == 0)
{
mucnik.style.display = "block";
dezert.style.display = "none";
salat.style.display = "none";
}
else if(box.value == 1)
{
mucnik.style.display = "none";
dezert.style.display = "block";
salat.style.display = "none";
}
else if(box.value == 2)
{
mucnik.style.display = "none";
dezert.style.display = "none";
salat.style.display = "block";
}
},
};
Problém je v tom, že keď sú prítomné obe funkcie tak funguje vždy len jedna. Mám taký pocit, že tá prvá funkcia nejakým spôsobom deformuje hodnotu option.value.
Choď na stránku: 