PDA

Click to See Complete Forum and Search --> : Dynamic <option> tags??

Superfly1611
10-06-2003, 10:21 AM
OK - i'm designing an ASP site - don't worry this is not an ASP question.

i'm using Spans on one particular page and i need to know if the following is possible.....

I have successfully created dynamic <select> boxes in html/jscript before without any hassle at all.

But in this particular instance i need to use spans to create the <option> tags but have the <select> tags outside the spans.

This is a simplified version of what i've tried as it's pretty unreadable with all the ASP in there aswell......


<span id=1>
<option>a</option>
<option>b</option>
<option>c</option>
</span>
<span id=2>
<option>d</option>
<oprion>e</option>
<option>f</option>
</span>

<select id="AAA" onchange="update();">
<option value=1>1</option>
<option value=2>2</option>
</select>

<select>
<span id="ZZZ">
</span>
</select>



I then use a javascript to try and change the contents of the span/select box "ZZZ"

<script language=javascript>
function update()
{
//Get Name of Source Select Box Containing
Source= document.getElementById("AAA");
//Get The Value(ID)of theCategory Selected
id = Source.value;
//Get Span values for That Selected Select Box
element = document.getElementById(id);
//Get Name of Destination Select Box
destElement = document.getElementById("ZZZ");
//Set Values of Destination Select Box
destElement.innerHTML = element.innerHTML;
}
</script>


But it doesn't work.....

I get an error....
"destElement is null or not an object"

Is what i'm trying not possible?
Why don't i just include the <Select> tags inside the spans... because there are 150 rows each with a set of dynamic select boxes on it so i cant really do that as it would mean dynamically creating 150 sets of about 5 spans.
I'm trying to make this as efficient as possible so i don't want to have to hit the server everytime a value is changed.

Is what i'm trying not possible?
Fang
10-07-2003, 03:46 AM
There are a few problems:
The browsers appear to disregard any illegal form content - <span> tags.
You can not dump (innerHTML) into a form like this.
Numeric id's are not allowed.

Here is something similar to work with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Superfly options</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
//<![CDATA[
<!--
function update() {
//find selected in "AAA"
var oAAA=document.myform.aaa;
for(var i=0; i<oAAA.length; i++) {
if(oAAA[i].selected) {
var elmID=oAAA[i].value;
}
}
var sourceElm=document.myform['select'+elmID];
//Get Name of Destination Select Box
var destElm = document.myform.zzz;
//get length of destination box
var dElen=destElm.length
//Set Values of Destination Select Box
for(var i=0; i< sourceElm.length; i++) {//insert items into zzz box
destElm.options[dElen++]=new Option(sourceElm[i].text, sourceElm[i].value);
}
}
//-->
//]]>
</script>

</head>
<body>

<form action="#" id="myform" name="myform"><div>
<select name="select1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>

<select name="select2">
<option>d</option>
<option>e</option>
<option>f</option>
</select>

<select id="aaa" name="aaa" onchange="update(this);">
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="zzz" name="zzz">
<option>z</option>
</select>
</div></form>

</body>
</html>