---
title: "Select och innerHTML"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/159414-select-och-innerhtml"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "NoiseMaker"
published: "2007-04-18T14:35:17.000Z"
updated: "2007-04-19T06:52:00.000Z"
replies: 3
views: 435
page: 1
pages: 1
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/159414-select-och-innerhtml"
---

# Select och innerHTML

## #1 — NoiseMaker, 2007-04-18T14:35Z

Hejsan!

Har lite trassel med att ändra innehållet i en \<select\>\</select\> med hjälp av innerHTML.

Om jag har två variabler i javascriptet innehållande en eller flera \<option\>\</option\> och vill kunna ändra värdelistans innehåll mellan dessa två varibalers värden, visst borde det gå med hjälp av innerHTML (lite ajax-tänk).

Mitt problem är att av "\<option value=1\>nr 1\</option\>" så sätts bara "nr 1\</option\>" in från variabeln vilket såklart resulterar i att listan pajjar helt.

Hur laddar man enklast en select-värdelista med "dynamisk" data UTAN att ladda om hela sidan? Några tips?

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

## #2 — Koplik, 2007-04-18T14:46Z

Jag vet inte hurvida det fungerar med innerHTML eller outerHTML. Men själv har jag precis jobbat lite med att ha dynamiska dropdown-listor och jag gjorde så att jag tömde listan vid varje förändring och sedan byggde upp den igen.
Det är inte den bästa lösningen, men den verkar fungera.

```
  function emptyList(list)
  {
    theSel = document.getElementById(list)
    var selIndex = theSel.selectedIndex;
    for(i=theSel.length-1; i>=0; i--)
    {
      theSel.options[i] = null;
    }
    if (theSel.length > 0) {
      theSel.selectedIndex = selIndex == 0 ? 0 : selIndex - 1;
    }
  }

  function addOptionsToList(list, option_Text, option_Value){
    var foundOption = false;
    var elSelect = document.getElementById(list);

    for(i=0;i<elSelect.length;i++){
      if(elSelect.options[i].value == option_Value){
        foundOption = true;
        break;
      }
    }

    if(!foundOption){ //Valet finns inte sedan tidigare i rullisten, därmed så läggs den till
      var elOpt = document.createElement("option");
      elOpt.text = option_Text;
      elOpt.value = option_Value;

      try{ //Doesn't work in IE
        elSelect.add(elOpt, null);
      } catch(e) { //IE Only
        elSelect.add(elOpt);
      }
    }
  }

  function populateListFilter(list) {
    //Loopar igenom alla värden som ska in i listan, mitt exempel bestod av en XML-hämtning, därmed tog jag bort det.
   for(i=0;i<minArray.length;i++)
     addOptionsToList(list, minArray[i], minArray[i]);
  }
```

Som sagt, om någon annan inte levererar en bättre lösning så kanske funktionerna kan vara till någon hjälp.

list \<- är alltså ID på den \<select\> jag vill tömma eller populera

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

## #3 — colione, 2007-04-18T14:49Z

Kolla på denna lösning, använder DOM-scripting istället för innerHTML. Kan säta in och ta bort vartsomhelst.
<http://www.mredkj.com/tutorials/tutorial005.html>

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

## #4 — NoiseMaker, 2007-04-19T06:52Z

Kanon! DOM-varienten var precis vad jag var ute efter! 
Tack båda två

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

---

Tråden på webben: https://www.webforum.nu/amne/javascript/159414-select-och-innerhtml