PDA

View Full Version : Dynamic Select Boxes



junestag
10-02-2007, 05:38 PM
I'm trying to dynamically create a select box from the instance of the select box that already exists in the code (named 'DEPT' for department).

I'm able to duplicate the select box using the code below (by pressing on the link with the text 'Add Another Course') and the number of options is correct in the duplicated select boxes but every option just says '[object HTMLOptionElement]'.

Any ideas why it's not working? I'm sure it has to do with my for loop (see the code below).

thanks!
- sage


<script type="text/javascript">

x=0;

function insertRow(){

eLabel=document.createElement("label");
eLabel.setAttribute("id","label");
eLabel.setAttribute("for","DEPT"+x);

eDept=document.createElement("select");
eDept.setAttribute("id","dept"+x);
eDept.setAttribute("class","select");

for (i=0; i < document.theForm.DEPT.length; i++) {
Option[i] = document.theForm.DEPT[i];
objOption = new Option(Option[i],Option[i]);
eDept.options[eDept.length] = objOption;
}

document.getElementById("mContainer").appendChild(eLabel);
document.getElementById("mContainer").appendChild(eDept);

x++;
}

</script>
</head>
<body>
<form name="theForm">

<div class="instructions">
First Course:
</div>

<label for="DEPT" id="label">Department:</label><p>
<select name="DEPT" class="select">
<option> </option>
<option>ANS </option>
<option>ANTH </option>
<option>ABUS </option>
<option>ART </option>
<option>AVTY </option>
<option>BIOL </option>
<option>BA </option>
<option>CCS</option>
<option>CIOS </option>
<option>COMM</option>
<option>COUN</option>
<option>CS </option>
<option>DEVE </option>
<option>DEVM </option>
<option>DRT</option>
<option>ECON </option>
<option>ED </option>
<option>ENGL </option>
<option>FLM</option>
<option>GEOG </option>
<option>HLTH </option>
<option>HIST </option>
<option>HUMS</option>
<option>JRN</option>
<option>JUST</option>
<option>LAT</option>
<option>LING </option>
<option>LS </option>
<option>MATH </option>
<option>MUS </option>
<option>PS </option>
<option>PSY </option>
<option>SOC </option>
<option>SPAN</option>
<option>STAT </option>
<option>SWE</option>
<option>SWK</option>
<option>THR </option>
<option>TTCH</option>
<option>WMS</option>
</select></p>

<div id="mContainer"></div>

<a href="javascript:void(0)" onclick="return insertRow();">Add Another Course</a>
</form>

Mr Moo
10-03-2007, 10:57 AM
If I remember correctly, you need to set the text and value properties:


.
.
.
objOption = new Option(Option[i].text,Option[i].value);
.
.
.

junestag
10-03-2007, 11:05 PM
thanks Mr. Moo, that worked great. :)