N nkrantz Medlem sedan apr. 2002 830 inlägg Frågan 22 juni 2004 10:11 #1 Hej,
Frågan har säkert varit uppe förut, men har inte hittat något svar.
Det är så att jag har en select-ruta som innehåller en massa css-klassar så att man skall kunna välja klass på en text man skriver. Vad jag vill göra är att varje option skall ha den klassen som visas.
MEN, jag verkar inte kunna ändra typsnitt eller storlek i optiontagen, bakgrundsfärg och teckenfärg funkar.
Någon som vet?
// Nippe
L LeonL Medlem sedan dec. 2002 5 871 inlägg Typsnitt- och storleksspecifikationer kan du lägga i select-taggen.
Eller vill du ha olika typsnitt/storlekar på olika option-taggar?
N nkrantz Medlem sedan apr. 2002 830 inlägg Japp, olika typsnitt/storlekar på olika options-taggar som finns inom en select-tag...
Palle Medlem sedan apr. 2000 3 174 inlägg Nope, det fungerar inte att göra så.
N nkrantz Medlem sedan apr. 2002 830 inlägg x( Det var ju ingen upplyftande sak... Finns det något annat sätt att lösa det på? Med JavaScript, kanske kan göra en dynamisk dropdown med layers eller nåt?
Förslag?
// Nippe
L LeonL Medlem sedan dec. 2002 5 871 inlägg Använd samma dropdown, men lägg en liten ruta (div) med lite text bredvid som förhandsvisning. :) Det är ganska enkelt att lösa med JavaScript. ;)
N nkrantz Medlem sedan apr. 2002 830 inlägg Ah, det var iofs inte så dumt... Ska fixa!
N nkrantz Medlem sedan apr. 2002 830 inlägg Vad heter händelsen när man ändrar värde i en select?
Nu har jag
<option class="default" value="default" onfocus="document.getElementById('preview').className=this.options[this.selectedIndex].value"
Men det kanske inte ska vara onfocus. Dessutom så är det inte selectedIndex jag vill ha, utan jag vill ha det värdet som man just nu markerar i option-tagen..
// Nippe
Palle Medlem sedan apr. 2000 3 174 inlägg Ett alternativ annars är ju att styla om HELA drop-menyn att passa efter din valda klass.. ex.
[red]<html>
<head>
<script type="text/javascript">
<!--
function styleMe(i)
{
if(i!=='#')
{
objSelect = document.getElementById('bar');
switch (i)
{
case'1' :
objSelect.style.fontFamily = 'Arial';
objSelect.style.color = '#FFFF00';
objSelect.style.backgroundColor='#FF0000';
break;
case'2' :
objSelect.style.fontFamily = 'Times';
objSelect.style.color = '#FFFFFF';
objSelect.style.backgroundColor='#0000FF';
break;
case'3' :
objSelect.style.fontFamily = 'Verdana';
objSelect.style.color = '#FFFF00';
objSelect.style.backgroundColor='#000000';
break;
}
}
}
//-->
</script>
</head>
<body>
<form id="foo">
<select id="bar" size="1" style="width: 200px;" onchange="styleMe(this.options[this.selectedIndex].value);">
<option value="#">Väl här:</option>
<option value="1">Alternativ 1</option>
<option value="2">Alternativ 2</option>
<option value="3">Alternativ 3</option>
</select>
</form>
</body>
</html>[/red]
Palle Medlem sedan apr. 2000 3 174 inlägg
nkrantz skrev:
Vad heter händelsen när man ändrar värde i en select?
[red]onchange="foo();"[/red]
N nkrantz Medlem sedan apr. 2002 830 inlägg Tack Palle, men det blir inte riktikt samma sak. Det är så att jag håller på gör ett artikelhanteringssystem, och när man väljer något i optiontagen så sätts en kod in i min html kod. Därför skulle det vara gött att kunna se hur classen ser ut, innan man applicerar den så att säga...
Jesper T Medlem sedan nov. 2001 7 144 inlägg Funkar detta?
<script type="text/javascript">
<!--
function showhide(id){
document.getElementById(id).style.display=(document.getElementById(id).style.display=='none')?'block':'none';
};
function mover(id){
document.getElementById(id).style.background = '#CCCCCC';
};
function mout(id){
document.getElementById(id).style.background = '#FFFFFF';
};
function changeFont(id){
var val;
if(!id==''){
val=" "+id;
}else{
val=" Välj något";
}
setTimeout('showhide(\'content_1\');',300);
document.getElementById("myTop").innerHTML=val;
document.f.e.value=id;
};
//-->
</script>
<style type="text/css">
#mySelect{width:150px;border:1px solid black;font-family:verdana;font-size:12px;padding:0;}
.myOptions{margin:20px 0 0 0;padding:2px;cursor:default;}
a{text-decoration:none;color:black;}
.myTop{line-height:15px;}
#arrow{font-family:webdings;width:16px;border:1px solid gray;background:#ccc;text-align:center}
#val1{font-family:arial;}
#val2{font-family:courier new;}
#val3{font-family:comic sans;}
#val4{font-family:times;}
#val5{font-family:symbol;}
</style>
<div id="mySelect">
<div class="mytop">
<div style="float:left;cursor:pointer;" id="myTop" onclick="setTimeout('showhide(\'content_1\');',200)"> Välj något</div>
<div style="float:right;" id="arrow"><a href="javascript:void(setTimeout('showhide(\'content_1\');',200));">6</a></div>
</div>
<div class="myOptions" style="display:none;" id="content_1">
<div id="val0" onclick="changeFont('')" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Inget</div>
<div id="val1" onclick="changeFont(this.innerHTML)" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Arial</div>
<div id="val2" onclick="changeFont(this.innerHTML)" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Courier new</div>
<div id="val3" onclick="changeFont(this.innerHTML)" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Comic sans</div>
<div id="val4" onclick="changeFont(this.innerHTML)" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Times</div>
<div id="val5" onclick="changeFont(this.innerHTML)" onmouseover="mover(this.id)" onmouseout="mout(this.id)">Symbol</div>
</div>
</div>
<form name="f">
<input type="text" name="e" id="e" value="">
</form>
Jesper T Medlem sedan nov. 2001 7 144 inlägg Observera mellan_rummet : "java script"
N nkrantz Medlem sedan apr. 2002 830 inlägg Cool... Något sådant borde ju funka, fick lite felmeddelande, men ska jobba vidare på det!
N nkrantz Medlem sedan apr. 2002 830 inlägg Jo, jag gjorde det ;) Den klagade på ) på rad 50 bland annat...
Jesper T Medlem sedan nov. 2001 7 144 inlägg Ok, detta forum tar bort backslashar.
N nkrantz Medlem sedan apr. 2002 830 inlägg Funkar PERFEKT! Tackar så mycket!
Jesper T Medlem sedan nov. 2001 7 144 inlägg Kul,
