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

Code:

<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:

PHP Code:


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

**junestag** · 10-03-2007, 11:05 PM

thanks Mr. Moo, that worked great.

Thread: Dynamic Select Boxes

Thread Tools

Search Thread

Dynamic Select Boxes

That works!

Bookmarks

Bookmarks

Posting Permissions