How to clone or copy a combobox dinamically ??

I have a loop that creates comboboxes and the fill them in with data, the problem is that the function MakeList2() is call for each combobox created. Considering that aData.length= 30 and aFormula.length=700 , it takes an unacceptable amount of time to build the UI.

Unnecessary parts of the original code have been removed:

for(var i=0;i<aData.length;i++){
   document.write("<SELECT id=selSubs"+j+" class=inlabel onchange=NewChangeToSave()></SELECT>"
 
   // fill in the formulacombos with data
   var elId=document.getElementById("selSubs"+j)
   MakeList2(elId,aFormula,1);
}

function MakeList2(Name,Content,shift){
    if(Content.length>0){
      var i
      var j=0
      for(i=shift;i<Content.length;i=i+2){
          j++
          newOp=document.createElement("OPTION");
          newOp.text=Content[i]
          newOp.value=Content[i+1]
          Name.options[j-shift]=newOp ;
      }
    }
}

How can I copy the content to all the comboboxes without going thought the aFormula and creates all the OPTION elements each time ???

I have tried this , but it does not work:

for(var i=0;i<aData.length;i++){
   document.write("<SELECT id=selSubs"+j+" class=inlabel onchange=NewChangeToSave()></SELECT>"

   // fill in the formulacombos with data
   if(j==0){
       var elId=document.getElementById("selSubs"+j)
       MakeList2(elId,aFormula,1);
   }else{
      var elId0=document.getElementById("selSubs"+(j-1))                
      var elId=document.getElementById("selSubs"+j)
       elId=elId0
  }
}

Thank for your help !!


danielc1998Asked:
Who is Participating?
 
Albert Van HalenConnect With a Mentor Analyst developerCommented:
Is this what you want??
// create a dropdownlist and append it the body
var ddl = document.createElement("SELECT");
// specify a unique id
// add other attributes like className
ddl.id = "ddl_0";
document.body.appendChild(ddl);
// append 500 options
for(var x=0; x<500; x++)
	ddl.options.add(new Option(x, x));
 
// clone the select element and append it to the body
for(x=0; x<30; x++)
{
	var ddlClone = ddl.cloneNode(true);
	// specify a different id to the dropdownlist
	ddlClone.id = "ddl_" + (x + 1);
	document.body.appendChild(ddlClone);
}

Open in new window

0
 
ZvonkoSystems architectCommented:
Do you have to use document.write("<SELECT ... ?
Why?
0
 
ZvonkoSystems architectCommented:
How about this:
<body>
<form>
<script>
aFormula = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z".split(",");
aData = [1,2,3];
var theForm = document.forms[0];
for(var i=0;i<aData.length;i++){
  var newSel = document.createElement("<SELECT id=selSubs"+i+" class=inlabel onchange=NewChangeToSave()>");
  // fill in the formulacombos with data
  MakeList2(newSel,aFormula,0);
  theForm.appendChild(newSel);
}
 
function MakeList2(theSel,Content,shift){
    if(Content.length>0){
      var opt = theSel.options;
      for(var j=shift;j<Content.length;j=j+2){
        var newOpt = new Option(Content[j],Content[j+1]);
        opt[opt.length]=newOpt;
      }
    }
}
 
 
</script>
</form>
</body>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
danielc1998Author Commented:
Thanks to all, the first solution given by Zvonko was what i was looking for.
0
 
danielc1998Author Commented:
Ups!!!!! I made a mistake, it is AlbertVanHalen code what i needed !!!!!! How can I revert my anwser accepted ??? Sorry .
0
 
ZvonkoSystems architectCommented:
Post a request to Community Support to reopen your question.
Open a question at this topic area: http:/Community_Support/General/
Place in it a link to this question.
0
 
danielc1998Author Commented:
thanks.
0
 
danielc1998Author Commented:
thanks
0
 
Albert Van HalenAnalyst developerCommented:
You're welcome, and thanks for the points...
0
 
ZvonkoSystems architectCommented:
One more note: the accpted solution does NOT produce a valid form.
The select elements are appended to the body node and not to the form node. The select values cannot be submitted by the form because they are outside of the form.
My proposal appended the select element controls to the form.

0
 
Albert Van HalenAnalyst developerCommented:
Great tip Zvonko.

0
 
ZvonkoSystems architectCommented:
:)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.