Hej på er! Nu regnar det :) Antar att hösten är här också, ganska skönt.
Har en liten tanke om hur jag vill ha mina rullgardiner (select)...
Jag har ett databasprogram i windows som är helt fantastiskt (när det inte krånglar). I det finns det rullgardiner som är redigerbara... Låt oss säga att jag har en rullgardin med bland annat värdet "Webforum - www.webforum.nu" så kan jag välja det värdet i rullgardinen och sen gå in och ändra det till t.ex "Web-forum - www.webforum.com". Som det är nu med dom vanliga <select>-menyerna så finns ju inte denna möjligheten! Tyvärr, så jag funderar på om man kan lösa det på nått sätt?
En idé jag har är att ha två stycken flät så här:
[textfält1] [select1]
Där [textfält1] är ett vanligt textfält
Och där [select1] är en vanlig rullgardin, fast det som först bara är synlig är själva rullgardinsknappen som man sen klickar på så får man fram hela innehållet... har testat att göra så att <select> är bara 10px bred, och på nått sätt få innehållet att vara t.ex 200px brett, men det funkar inte på det sättet jag har försökt. Sen när man klickat på det värdet man vill ha i rullgardinen så ska det hamna automatiskt i [textfält1]... på så sätt så kan man redigera texten hur man vill.. Notera att jag ej vill redigera texten i databasen, utan bara i formuläret..
Givetvis finns det fler lösningar än den följande. T.ex. skulle du initialt kunna ha en bild på en dropdownpil som, när den klickas på, skiftas till en <select>. Sedan är jag litet osäker på huruvida värden för <option>s också skall kunna ändras. Nedan är det ej implementerat, men är trivialt att åstadkomma om det skulle önskas.
<script type="text/javascript">
var isWide = false, sel, selWidth, currOp = null;
function widenSelect(f)
{
if (!isWide){
sel.style.width = selWidth + "px";
isWide = true;
f.elements["i"].style.display = "inline";
}
}
function updateInput(s)
{
currOp = s.options[s.selectedIndex];
s.form.elements["i"].value = currOp.text;
}
function updateOption(v)
{
if (currOp){
currOp.text = v;
}
}
</script>
<form>
<select name="s" onclick="widenSelect(this.form)" onchange="updateInput(this)">
<option>webForum</option>
<option>abc</option>
<option>123</option>
</select>
<input name="i" style="display:none" size="50" onkeyup="updateOption(this.value)">
</form>
<script type="text/javascript">
var sel = document.forms[0].elements["s"];
selWidth = sel.offsetWidth;
sel.style.width = 20 + "px";
</script>
* Jag vill ej att selecten ska expandera, jag vill bara ha en liten knapp helt tiden. Platsbrist 2006 :)
* Värdena i selecten ska Ej kunna ändras (livsfarligt)... Dom ska ju hämtas från en databas :)
Annars funkar det precis så som jag vill. Det är ruggigt fint :):D
Har du några lösningar på mina förslag?
Kan man på något sätt göra så att det bara är "innehållet" i selecten som är "stort" .. medans man bara har en liten knapp till den?
Edit: Att ta bort funktionen som gör så att värdet uppdateras i selecten var ju inte så svårt :) Fixade det...
Jag har grejat tagit bort lite grejer i din kod:
<script type="text/javascript">
var isWide = false, sel, selWidth, currOp = null;
function updateInput(s)
{
currOp = s.options[s.selectedIndex];
s.form.elements["i"].value = currOp.text;
}
function updateOption(v)
{
if (currOp){
currOp.text = v;
}
}
</script>
<form>
<select name="s" onchange="updateInput(this)">
<option>webForum</option>
<option>abc</option>
<option>123</option>
</select>
<input name="i" size="50">
</form>
<script type="text/javascript">
var sel = document.forms[0].elements["s"];
selWidth = sel.offsetWidth;
sel.style.width = 20 + "px";
</script>
Gjorde så att textfältet syns direkt t.ex.. och att värdena inte går att ändra i selecten...
Det enda som återstår nu är att innehållet i selectmenyn ska vara "stort", men knappen ska förbli "liten" :)
EDIT: Edit igen! Det här vore grymt bra... tror jag?? Man har det så som jag visade i koden.. men när man klickar på selectknappen så "försvinner" textfältet under tiden man väljer värde i selectmenyn! Vad tror du om det? Och att det sen så klart ploppar fram igen, fast med valt värde :)
Hm, jag är litet osäker på hur du menar. Du skriver att menyn ej får expandera. Men om den inte gör det, hur skall man då kunna välja mellan olika värden? Är det samma effekt som <textarea rows="1"> du är ute efter?
I nedanstående kod göms textfältet medan användaren väljer ett värde och visas igen när ett värde har valts.
<script type="text/javascript">
function updateInput(s)
{
var currOp = s.options[s.selectedIndex];
s.form.elements["i"].value = currOp.text;
s.form.elements["i"].style.display = "inline";
}
var m = 0;
function showHideInput(f)
{
if (++m % 2) f.elements["i"].style.display = "none";
}
</script>
<form>
<select name="s" onchange="updateInput(this)" onclick="showHideInput(this.form)">
<option>webForum</option>
<option>abc</option>
<option>123</option>
</select>
<input name="i" style="display:none" size="50">
</form>
Först ska det se ut så här:
[liten selectknapp] & [textfält]
sen antingen klickar man på selectknappen eller skriver in ett eget värde
klickar man på den lilla selectknappen så döljs textfältet och byts ut av en selectmeny som är i full storlek.
sen när man valt värde ur selectmenyn så återgår raden till [liten selectknapp] & [textfält med valt värde från selectmenyn]
äeh nu har jag fått nått fel utan att ha pillat med något, det har ju fungerat perfekt ända tills nu=)
function updateInput(s, i)
{
var currOp = s.options[s.selectedIndex];
s.form.elements[i].value = currOp.text;
s.style.display = "none";
s.form.elements[i].style.display = "inline";
}
function showHideSelect(s, i)
{
var s = document.forms[0].elements[s],
i = document.forms[0].elements[i];
i.style.display = (i.style.display != "none") ? "none" : "inline";
s.style.display = (s.style.display != "none") ? "none" : "inline";
}
får error:
'style' är Null eller inte ett objekt.. vad är fel egentligen när det fungerat perfekt.. och slutat att fungera utan att jag pillat med det?
Det är inte speciellt intressant att se asp-kod när problemet är klientrelaterat. Visa hur den genererade HTML-koden ser ut när den kommer till webbläsaren.
Då är nog det bästa att bifoga en länk till sidan, alternativt ta bort samtliga JavaScript och sedan lägga till dem en efter en för att upptäcka var felet ligger.
