problem adding option to select tag using DOM on mozilla

[nayeemquayum]

Hello every body,
I was trying to populate a drop down box using ajax/javascript function. My jsp page has a select tag like this
<select name="compSelect" onChange="changeElement();">
</select>
I am trying to populate the drop down box based on database query. I intend to accomplish the task using follow code
componentList=document.getElementById('compSelect' );
var singleOption= new Option(lableValue,indexValue,true,false);
componentList.add(singleOption,null);

When I tested my code on Mozilla firefox it failed to populate the drop down box. Instead of trying the add functionality I also tried to use appendChild like following
componentList.appendChild(singleOption);
This also failed to produce the result. I found an old post on this site regarding this issue but could not follow the discussion. I am pretty new to javascript/ajax and DOM programming. Can anyone please help me out figuring what is wrong? I would really appreciate your kind help. Thanks in advance.

[Logician]

<select name="compSelect" onChange="changeElement();">
.
.
componentList=document.getElementById('compSelect' );

Thanks in advance.

I'm sure the Mozilla Error Console is trying to explain that.
If you want to get a reference to an element by its ID, it needs to have an ID.

[psybert]

I'm still a beginner, but this is one that stumped me at first. Add an ID to the <select>!

<select name="compSelect" id="compSelect" onChange="changeElement();">
</select>
 

[nayeemquayum]

Adding Id solved the problem.. Thanks so much for your help.