Kleur bij select

Status
Niet open voor verdere reacties.
bartwebdesign

bartwebdesign

Gebruiker
Lid geworden
16 jul 2006
Berichten
443
Hallo,

Ik wil een website maken met wat statussen.

Als je bijv. vrij aanklikt in een selectbox, dat de tekst ervoor groen wordt.
Als je bijv. bezet aanklikt, dat de tekst ervoor rood wordt.
Bij de overige selects, dat een zwarte kleur.

Wat is de code?
 
Als je de tekst in een label- of span-tag plaatst en een id meegeeft, kan je de inhoud ervan via javascript aanpassen
HTML: 
<script type="text/javascript">
function maakRood(elementID){
document.getElementById(elementID).innerHTML = "<span style=\"color: #FF0000;\">de tekst die gekleurd moet worden</span>";
}

--Johan
 
Laatst bewerkt:
.innerHTML verandert de inhoud van het element, maar ik was vergeten dat er ook iets als .style bestond :rolleyes:

hier heb je een uitgewerkt voorbeeld met wat commentaar bij, als je er niet uitgeraakt zal ik met plezier meer uitleg geven (maar nu moet ik ergens naartoe :D )
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-1" />
<title>statussen</title>
<script type="text/javascript" language="JavaScript">
//functie om rood te kleuren bij bezet of zwart bij unselect
function bezet(elementId)
{
	var te_kleuren = document.getElementById(elementId);  //de Id van het aan te passen element
	var bezet = document.getElementById("b_"+elementId);  //de Id van het selectievakje voor bezet
	if (bezet.checked == false)    //bezet werd zonet ge-deselecteerd
		te_kleuren.style.color = "#000000"; //kleur op zwart brengen
	else{ //bezet werd zonet geselecteerd
		var vrij = document.getElementById("v_"+elementId);   //de Id van het selectievakje voor vrij
		if (vrij.checked == true) //vrij was aangeduid
			vrij.checked = false;  //vrij niet meer selecteren
		te_kleuren.style.color = "#FF0000";  //kleur op rood zetten
	}
}
//gelijkaardige functie om groen te kleuren bij vrij of zwart bij unselect
function vrij(elementId)
{
	var te_kleuren = document.getElementById(elementId);  //de Id van het aan te passen element
	var vrij = document.getElementById("v_"+elementId);   //de Id van het selectievakje voor vrij
	if (vrij.checked == false)    //vrij werd zonet ge-deselecteerd
		te_kleuren.style.color = "#000000"; //kleur op zwart brengen
	else{ //vrij werd zonet geselecteerd
		var bezet = document.getElementById("b_"+elementId);  //de Id van het selectievakje voor bezet
		if (bezet.checked == true)  //bezet was aangeduid
			bezet.checked = false;  //bezet niet meer selecteren
		te_kleuren.style.color = "#00FF00";  //kleur op groen zetten
	}
}
</script>
</head>

<body>
<input type="checkbox" id="v_1" onchange="vrij(1)" />&nbsp;Vrij&nbsp;&nbsp;&nbsp;<input type="checkbox" id="b_1" onchange="bezet(1);" />&nbsp;Bezet&nbsp;&nbsp;&nbsp;<span id="1">de eerste selecteerbare status</span><br />
<input type="checkbox" id="v_2" onchange="vrij(2)" />&nbsp;Vrij&nbsp;&nbsp;&nbsp;<input type="checkbox" id="b_2" onchange="bezet(2);" />&nbsp;Bezet&nbsp;&nbsp;&nbsp;<span id="2">sanitaire ruimte :-p</span>
</body>
</html>

--Johan
 
Laatst bewerkt:
Johantrax zei:
.innerHTML verandert de inhoud van het element, maar ik was vergeten dat er ook iets als .style bestond :rolleyes:

hier heb je een uitgewerkt voorbeeld met wat commentaar bij, als je er niet uitgeraakt zal ik met plezier meer uitleg geven (maar nu moet ik ergens naartoe :D )
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-1" />
<title>statussen</title>
<script type="text/javascript" language="JavaScript">
//functie om rood te kleuren bij bezet of zwart bij unselect
function bezet(elementId)
{
	var te_kleuren = document.getElementById(elementId);  //de Id van het aan te passen element
	var bezet = document.getElementById("b_"+elementId);  //de Id van het selectievakje voor bezet
	if (bezet.checked == false)    //bezet werd zonet ge-deselecteerd
		te_kleuren.style.color = "#000000"; //kleur op zwart brengen
	else{ //bezet werd zonet geselecteerd
		var vrij = document.getElementById("v_"+elementId);   //de Id van het selectievakje voor vrij
		if (vrij.checked == true) //vrij was aangeduid
			vrij.checked = false;  //vrij niet meer selecteren
		te_kleuren.style.color = "#FF0000";  //kleur op rood zetten
	}
}
//gelijkaardige functie om groen te kleuren bij vrij of zwart bij unselect
function vrij(elementId)
{
	var te_kleuren = document.getElementById(elementId);  //de Id van het aan te passen element
	var vrij = document.getElementById("v_"+elementId);   //de Id van het selectievakje voor vrij
	if (vrij.checked == false)    //vrij werd zonet ge-deselecteerd
		te_kleuren.style.color = "#000000"; //kleur op zwart brengen
	else{ //vrij werd zonet geselecteerd
		var bezet = document.getElementById("b_"+elementId);  //de Id van het selectievakje voor bezet
		if (bezet.checked == true)  //bezet was aangeduid
			bezet.checked = false;  //bezet niet meer selecteren
		te_kleuren.style.color = "#00FF00";  //kleur op groen zetten
	}
}
</script>
</head>

<body>
<input type="checkbox" id="v_1" onchange="vrij(1)" />&nbsp;Vrij&nbsp;&nbsp;&nbsp;<input type="checkbox" id="b_1" onchange="bezet(1);" />&nbsp;Bezet&nbsp;&nbsp;&nbsp;<span id="1">de eerste selecteerbare status</span><br />
<input type="checkbox" id="v_2" onchange="vrij(2)" />&nbsp;Vrij&nbsp;&nbsp;&nbsp;<input type="checkbox" id="b_2" onchange="bezet(2);" />&nbsp;Bezet&nbsp;&nbsp;&nbsp;<span id="2">sanitaire ruimte :-p</span>
</body>
</html>

--Johan
Klik om te vergroten...

Ik gebruik een select box, dat ding waarin je iets selecteerd. Geen checkboxen.

Maar bij dit voorbeeld, als je de checkbox hebt geselecteerd, moet je daarna ook op de label klikken voor dat de tekstkleur veranderd.
Graag wat betere hulp.
 
Laatst bewerkt:
bartwebdesign zei:
Maar bij dit voorbeeld, als je de checkbox hebt geselecteerd, moet je daarna ook op de label klikken voor dat de tekstkleur veranderd.
Graag wat betere hulp.
Klik om te vergroten...

In FireFox werkt dit (checkbox) perfect, blijkt een IE-probleem te zijn :confused:

Heb het even bewerkt voor een dropdownmenu, en dat werkt bij mij ook in IE(5)

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-1" />
<title>statussen</title>
<script type="text/javascript" language="JavaScript">
<!--
function kleur(elementId)
{
    var te_kleuren = document.getElementById(elementId);   //de Id van het aan te passen element
	var keuze = document.getElementById("select"+elementId).options[document.getElementById("select"+elementId).selectedIndex].value //de geselecteerde waarde opvragen
	switch (keuze){
		case "none": //niets geselecteerd
				te_kleuren.style.color = "#000000"; //zwart
			break;
		case "vrij": //vrij geselecteerd
				te_kleuren.style.color = "#00FF00"; //groen
			break;
		case "bezet": //bezet geselecteerd
				te_kleuren.style.color = "#FF0000"; //rood
	}
}
// -->
</script>
</head>

<body>
<form name="testform">
<span id="1">de eerste selecteerbare status</span>&nbsp;<select id="select1" name="select1" size="1" onChange="kleur(1)">
<option value="none">--------</option>
<option value="vrij">Vrij</option>
<option value="bezet">Bezet</option>
</select><br />
<span id="2">sanitaire ruimte :-p</span>&nbsp;<select id="select2" name="select2" size="1" onChange="kleur(2)">
<option value="none">--------</option>
<option value="vrij">Vrij</option>
<option value="bezet">Bezet</option>
</select><br />
</form>
</body>
</html>

--Johan
 
Johantrax zei:
In FireFox werkt dit (checkbox) perfect, blijkt een IE-probleem te zijn :confused:

Heb het even bewerkt voor een dropdownmenu, en dat werkt bij mij ook in IE(5)

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-1" />
<title>statussen</title>
<script type="text/javascript" language="JavaScript">
<!--
function kleur(elementId)
{
    var te_kleuren = document.getElementById(elementId);   //de Id van het aan te passen element
	var keuze = document.getElementById("select"+elementId).options[document.getElementById("select"+elementId).selectedIndex].value //de geselecteerde waarde opvragen
	switch (keuze){
		case "none": //niets geselecteerd
				te_kleuren.style.color = "#000000"; //zwart
			break;
		case "vrij": //vrij geselecteerd
				te_kleuren.style.color = "#00FF00"; //groen
			break;
		case "bezet": //bezet geselecteerd
				te_kleuren.style.color = "#FF0000"; //rood
	}
}
// -->
</script>
</head>

<body>
<form name="testform">
<span id="1">de eerste selecteerbare status</span>&nbsp;<select id="select1" name="select1" size="1" onChange="kleur(1)">
<option value="none">--------</option>
<option value="vrij">Vrij</option>
<option value="bezet">Bezet</option>
</select><br />
<span id="2">sanitaire ruimte :-p</span>&nbsp;<select id="select2" name="select2" size="1" onChange="kleur(2)">
<option value="none">--------</option>
<option value="vrij">Vrij</option>
<option value="bezet">Bezet</option>
</select><br />
</form>
</body>
</html>

--Johan
Klik om te vergroten...

Hey, bedankt voor het script, heb er nog wat aan veranderd en is nu perfect. Ik heb er nog meer aan toegevoegd van kleuren.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan