---
title: "Göra SELECT-meny till text-fält!"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/151967-göra-select-meny-till-text-fält"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "oskars"
published: "2006-10-02T12:28:31.000Z"
updated: "2006-10-13T11:40:43.000Z"
replies: 25
views: 1099
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/151967-göra-select-meny-till-text-fält"
---

# Göra SELECT-meny till text-fält!

_Sida 1 av 2._

## #1 — oskars, 2006-10-02T12:28Z

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..

Tacksam för hjälp! 

Hoppas ni förstår mina idéer och förklaringar!   :i 

:)

Mvh
Oskar

Permalänk: https://www.webforum.nu/p/151967

## #2 — Peter S, 2006-10-02T13:35Z

Hej!

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>
```

Permalänk: https://www.webforum.nu/p/1876392

## #3 — oskars, 2006-10-02T14:59Z

Tjenare! Tusen tack!

Ser super ut, men har lite tankar:

\* 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 :)

Permalänk: https://www.webforum.nu/p/1876405

## #4 — Peter S, 2006-10-02T17:09Z

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>
```

Permalänk: https://www.webforum.nu/p/1876468

## #5 — oskars, 2006-10-02T17:24Z

Vi är på rätt väg :D

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\]

\*exalterad\*

Permalänk: https://www.webforum.nu/p/1876472

## #6 — Peter S, 2006-10-02T17:42Z

Jag har bifogat ett exempel på hur jag tror du vill ha det.

Bilagor:

- [oskars.zip](https://www.webforum.nu/a/12374.zip)

Permalänk: https://www.webforum.nu/p/1876484

## #7 — oskars, 2006-10-02T17:48Z

Nä men det är ju perfekt :D

UNDERBART!

Ska jag göra kopior på det där bara så jag får upp till 6st likadana under varandra?

\*svimfärdig\*

Permalänk: https://www.webforum.nu/p/1876487

## #8 — Peter S, 2006-10-02T17:51Z

Vi kan återanvända koden så här

```
<script type="text/javascript">
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";
}
</script>
<form>
 <img src="arrow.png" height="20" width="17" style="cursor:pointer" onclick="showHideSelect('s','i')">
 <select name="s" style="display:none" onchange="updateInput(this, 'i')">
  <option>webForum</option>
  <option>abc</option>
  <option>123</option>
 </select>
 <input name="i" size="40">
 <br>
 <img src="arrow.png" height="20" width="17" style="cursor:pointer" onclick="showHideSelect('t','j')">
 <select name="t" style="display:none" onchange="updateInput(this, 'j')">
  <option>webForum</option>
  <option>abc</option>
  <option>123</option>
 </select>
 <input name="j" size="40">
</form>
```

Permalänk: https://www.webforum.nu/p/1876491

## #9 — oskars, 2006-10-02T19:23Z

Jag tackar och bugar! Tack för enormt bra hjälp! Du har gjort mig otroligt sugen på att lära mig Javascript!

Permalänk: https://www.webforum.nu/p/1876546

## #10 — oskars, 2006-10-13T10:14Z

ä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?

Permalänk: https://www.webforum.nu/p/1883008

## #11 — @nders, 2006-10-13T10:19Z

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.

Permalänk: https://www.webforum.nu/p/1883010

## #12 — Peter S, 2006-10-13T10:21Z

Var anropar du showHideSelect()?

Permalänk: https://www.webforum.nu/p/1883012

## #13 — oskars, 2006-10-13T10:25Z

```
<img src="arrow.gif" style="cursor:pointer;margin:0 0 0 0;margin0;padding:0;" onclick="showHideSelect('produkt2_select','produkt2')">
<select name="produkt2_select" style="display:none;margin:1px 0 0px 3px;width:213px;" onchange="updateInput(this, 'produkt2')">
<option>Välj produkt...</option>
<option></option>
<option value="Cadillac Skinnjacka">Cadillac Skinnjacka</option>
<option value="1st 6-pack Grogg-glas "Cadillac"">1st 6-pack Grogg-glas "Cadillac"</option>
<option value="1st 6-pack Snaps-glas "Cadillac"">1st 6-pack Snaps-glas "Cadillac"</option>
<option value="1st 6-pack Whiskey-glas "Cadillac"">1st 6-pack Whiskey-glas "Cadillac"</option>
<option value="1st 6-pack Öl-glas "Cadillac"">1st 6-pack Öl-glas "Cadillac"</option>
</select>
<input name="produkt2" type="text" style="width:204px;">
```

```
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";
}
```

Sorry :)

Permalänk: https://www.webforum.nu/p/1883013

## #14 — Peter S, 2006-10-13T10:27Z

Följande ger mig inget felmeddelande:

```
<img src="arrow.gif" style="cursor:pointer;margin:0 0 0 0;margin0;padding:0;" onclick="showHideSelect('produkt2_select','produkt2')">
<form>
                                <select name="produkt2_select" style="display:none;margin:1px 0 0px 3px;width:213px;" onchange="updateInput(this, 'produkt2')">
                                    <option>Välj produkt...</option>
                                	<option></option>
	                                
	                                    <option value="Cadillac Skinnjacka">Cadillac Skinnjacka</option>
	                                
	                                    <option value="1st 6-pack Grogg-glas "Cadillac"">1st 6-pack Grogg-glas "Cadillac"</option>
	                                
	                                    <option value="1st 6-pack Snaps-glas "Cadillac"">1st 6-pack Snaps-glas "Cadillac"</option>
	                                
	                                    <option value="1st 6-pack Whiskey-glas "Cadillac"">1st 6-pack Whiskey-glas "Cadillac"</option>
	                                
	                                    <option value="1st 6-pack Öl-glas "Cadillac"">1st 6-pack Öl-glas "Cadillac"</option>
	                                
                                </select>
                                <input name="produkt2" type="text" style="width:204px;">
</form>

JAVASCRIPTET:
<script>
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";
}
</script>
```

Permalänk: https://www.webforum.nu/p/1883014

## #15 — @nders, 2006-10-13T10:28Z

Och om du ser till att koda om " till &quot; i namnen på glasen?

Vad är det för skillnad på de kodblocken som fungerar / inte fungerar då?

Permalänk: https://www.webforum.nu/p/1883015

## #16 — Peter S, 2006-10-13T10:32Z

> **@nders skrev:**
>
> Och om du ser till att koda om " till &quot; i namnen på glasen?

Såg inte dem   :r  (y) 

Fast faktum kvarstår: koden i mitt senaste inlägg ger mig inget felmeddelande i varken IE7 eller FF.

Permalänk: https://www.webforum.nu/p/1883016

## #17 — oskars, 2006-10-13T10:32Z

@nders, kan det va det? :O
jag vet inte riktigt :/
EDIT: Det funkar ändå inte om jag tar bort dom!

Kallar jag inte på min javascriptfil så här:
\<script language="javascript" type="text/javascript" src="javascript.js"\>\</script\>

Märker att andra jävla javascript slutat funk, men vissa fungerar ändå!. vafan?

Permalänk: https://www.webforum.nu/p/1883017

## #18 — Peter S, 2006-10-13T10:38Z

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.

Fungerar <http://member.webforum.nu/4685/oskars.html>?

Permalänk: https://www.webforum.nu/p/1883018

## #19 — oskars, 2006-10-13T10:40Z

Sidan du länkar till fungerar perfekt!!!

måste jag ha egna \<form\>-taggar för dom här? eller kan jag lägga koden innanför befintliga formgtaggar?

EDIT: Det funkar fortfarande inte på min sida dock.. ;)

EDIT: Det funkar inte om jag bara har det javascriptet i min javascript.js fil...

EDIT: hm... vafan... samma kodsnuttar funkar bra om jag t.ex lägger dom högst upp på sidan .. precis under \<body\>-taggen...   :q

Permalänk: https://www.webforum.nu/p/1883019

## #20 — Peter S, 2006-10-13T10:42Z

Problemet kan ligga i showHideSelect(). Den refererar till formulär 0, men om du har fler formulär på sidan gör du bäst i att skriva enligt

```
function showHideSelect(s, i)
{
  var s = document.forms["namn_på_formulär"].elements[s],
      i = document.forms["namn_på_formulär"].elements[i]; 
  i.style.display = (i.style.display != "none") ? "none" : "inline";
  s.style.display = (s.style.display != "none") ? "none" : "inline";
}
```

Permalänk: https://www.webforum.nu/p/1883020

---

Tråden på webben: https://www.webforum.nu/amne/javascript/151967-göra-select-meny-till-text-fält  
Nästa sida: https://www.webforum.nu/amne/javascript/151967-göra-select-meny-till-text-fält/page2.md