Select och innerHTML

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?

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

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

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