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