Selectboxen dynamisch mit Javascript erstellen

[elgo]

Hallo liebes Forum,

für ein kleines Shopsystem habe ich ein Skript geschrieben, welches mit dynamisch Selectboxen zu meinem Html-Dokument hinzufügt:

http://www.variouselmts.com/derschwarzeriese/shop.html

Leider, verlieren die Boxen ihren SelectedIndex wenn ich eine neue hinzufüge.
D.h. wenn ich der ersten Dropbox etwas auswähle und danach neue hinzufüge, wird der SelectedIndex der ersten gelöscht.

Ich möchte ungerne alle SelectedIndex Values mit übergeben, zumal ja auch beliebig viele Box entstehen können.

Vielleicht habt ihr eine einfachere Lösung für mich oder vielleicht habe ich ja auch nur irgendwas übersehen.

Hier noch mal der Code:

function iwantmore(){
  
  var selectbox = "<select name='ddgender" + counter + "' id='select' onchange='upitup(" + counter + ")'><option>GENDER" + counter + "</option><option>-</option><option value='female'>FEMALE</option><option value='male'>MALE</option><option>-</option></select><select name='ddsize" + counter + "' id='select'><option>SIZE</option></select><select name='ddcolour" + counter + "' id='select'><option>COLOUR</option></select><Br>";
  
  var new_div = document.createElement("DIV" + counter);
  document.getElementById("select").appendChild(new_div);
  document.getElementById("select").innerHTML = document.getElementById("select").innerHTML + selectbox;
  
  counter = counter + 1;
  
}
  
function upitup(wasjetzt){
  
  var ddgender1  = "ddgender" + wasjetzt;
  var ddsize1    = "ddsize" + wasjetzt;
  var ddcolour1  = "ddcolour" + wasjetzt;
  
  var ddgender = document.getElementsByName(ddgender1)[0];
  var ddsize = document.getElementsByName(ddsize1)[0];
  var ddcolour = document.getElementsByName(ddcolour1)[0];
  
  document.getElementsByName(ddsize1)[0].options.length = 0;
  document.getElementsByName(ddcolour1)[0].options.length = 0;
  

  
  if(ddgender.options[ddgender.selectedIndex].value == "male"){
    
    ddsize.options[0] = new Option("SIZE");
    ddsize.options[1] = new Option("-");
    ddsize.options[2] = new Option("MEDIUM");
    ddsize.options[3] = new Option("LARGE");
    ddsize.options[4] = new Option("-");
    
    ddcolour.options[0] = new Option("COLOUR");
    ddcolour.options[1] = new Option("-");
    ddcolour.options[2] = new Option("WHITE");
    ddcolour.options[3] = new Option("BLACK");
    ddcolour.options[4] = new Option("MINT");
    ddcolour.options[5] = new Option("YELLOW");
    ddcolour.options[6] = new Option("-");
     
   
    
    }
    
  else if(ddgender.options[ddgender.selectedIndex].value == "female"){
    
    ddsize.options[0] = new Option("SIZE");
    ddsize.options[1] = new Option("-");
    ddsize.options[2] = new Option("SMALL");
    ddsize.options[3] = new Option("MEDIUM");
    ddsize.options[4] = new Option("LARGE");
    ddsize.options[5] = new Option("-");
    
    ddcolour.options[0] = new Option("COLOUR");
    ddcolour.options[1] = new Option("-");
    ddcolour.options[2] = new Option("WHITE");
    ddcolour.options[3] = new Option("BLACK");
    ddcolour.options[4] = new Option("MINT");
    ddcolour.options[5] = new Option("LILAC");
    ddcolour.options[6] = new Option("CORAL");
    ddcolour.options[7] = new Option("-");
    
  }
  
  }

 

[Sven Mintel]

Zuerst mal Prinzipell: du fügst da innerhalb eines Selects erst ein <div> und dann ein <select> ein...das beides keine regulären Kindelemente eines <select> sind, sollte klar sein, denn da gehören nur optgroup/option hinein.

aber egal...irgendwas scheinen die Browser da zusammenzuwurschteln, und man sieht was

Das, was speziell dein Problem verursacht, dürfte jenes sein:

document.getElementById("select").innerHTML = document.getElementById("select").innerHTML + selectbox;

du überschreibst dabei das vorhandene <select>, und da die selectedIndex-Eigenschaft, sofern sie nicht von dir im HTML-Code der Box notiert wurde, irgends verfügbar ist, geht sie verloren.

Versuche daher, beim Erzeugen der neuen Box die vorhandene unangetastet zu lassen.
Das passende Mittel dafür kennst du ja schon mit appendChild().