Adding options in select

[vchris]

Now the problem comes with the adding of options in the select. I guess I'll need a 2 dimensional array for value and text. The array should get filled at the beginning of the loop before removing the options so I have all of the options in my array. Every time someone changes option in the 1st select the option in the 2nd select should reappear and then removed depending on the selection in the 1st select.I don't have a lot of knowledge about 2 dimensional array. Would this work with only 1 loop? How do I set the value for 2 dimensions? See the example below.This is what I got:

for(i=0;i<=processLength;i++) {	myOptions[i][i] = process.options[i].value;}

[aspnetguy]

no that won't work you need 2 loopsCan you explain the situation, I don't quite understand what you are doing. You have 2 drop downs and when you select an option in drop down 1 it removes the option with same index in drop down 2???

[vchris]

No it keeps the options in select 2 with the same value.My problem right now is that I only remove so if you choose another option in select 1 well select 2 will be empty. I need to re-add all the options in select 1 onChange before I remove them. I need a 2 dimensional array to store the text and value of options in select 2. So now when the user chooses an option in select 1 it will show appropriate options in select 2.

for(i=0;i<=processLength;i++) {	for(j=0;i<=1;j++) {		myOptions[i][j] = process.options[i].value;	}}

I get an error saying myOptions has no properties.

[jesh]

Rather than a two-dimensional array which holds the text and value of an option, you might consider two one-dimensional arrays - one for texts, one for values - or a single one-dimensional array which holds the options themselves:

var myOptions = new Array();var option = document.createElement("option");option.text = "Option One";option.value = 1;myOptions[myOptions.length-1] = option;

This might alleviate some of the complexity of having a two-dimensional array. Then, if you wanted to add the options to the select, you could do this:

var mySelect = document.getElementById("mySelectId");for(var i = 0; i < myOptions.length; i++){	mySelect.add(myOptions[i]);}

[aspnetguy]

this will work too to create an option

var option = new Option("Option One","1");

[vchris]

Jesh, I'm working on your suggestion but I got an error that I don't really understand.

Error: process.options has no properties

It happens here:

var process = document.getElementById('process');for(i=0;i<=processLength;i++) {	myOptionsText[i] = process.options[i].text;	myOptionsValue[i] = process.options[i].value;}

[aspnetguy]

change i<=processLength toi<process.length

[vchris]

Same issue. I declared this variable up top earlier: var processLength = document.getElementById('process').options.length;

[aspnetguy]

oops, it should bei<processLengthori<process.options.lengthsorry, make sure it si < not <=

[vchris]

Thanks aspnetguy, that solved my problem. How would your method of adding options in a select work.var option = new Option("Option One","1");I want to add options in a select called process. I want to add them with my loop.I got this:

var processLength = document.getElementById('process').options.length;var process = document.getElementById('process');for(i=0;i<processLength;i++) {	myOptionsText[i] = process.options[i].text;	myOptionsValue[i] = process.options[i].value;		process.options.add(myOptionsText[i], myOptionsValue[i]);}

[aspnetguy]

for(i=0;i<processLength;i++) {	var option = new Option(process.options[i].text,process.options[i].value);		process.options[select.options.length-1] = option;}

I don't think your for loop is doing what you want. You are creating an option from process.options and then adding it tot he end of process, you are just duplicating process.options. Shouldn't you be adding them to a different select?

[vchris]

Doesn't seem to work. I did an output of option and I get [object HTMLOptionElement]

for(i=0;i<processLength;i++) {	myOptionsText[i] = process.options[i].text;	myOptionsValue[i] = process.options[i].value;			var option = new Option(myOptionsText[i],myOptionsValue[i]);   process.options[processLength-1] = option;	document.write(option + '<br>');}

[aspnetguy]

thats because it is an OptionElement. If you want to see the values of the option use option.value and option.text

[vchris]

Ok now I see everything is there but how come it's not refilling the select onChange?

function removeOptions(selectbox){	var i;	var myOptionsText = new Array();	var myOptionsValue = new Array();	var processLength = document.getElementById('process').options.length;	var process = document.getElementById('process');		for(i=0;i<processLength;i++) {		myOptionsText[i] = process.options[i].text;		myOptionsValue[i] = process.options[i].value;		var option = new Option(myOptionsText[i],myOptionsValue[i]);   		process.options[processLength-1] = option;		/*document.write(option.value + ' - ' + option.text + '<br>');*/	}		for(i=processLength-1;i>=0;i--) {		if(selectbox.options[selectbox.selectedIndex].value != process.options[i].value && process.options[i].value != 'default' && selectbox.options[selectbox.selectedIndex].value != 'default') {			process.remove(i);					}	}}

[aspnetguy]

that function is doubling the size of process (duplicating each exisiting option) then removing 1 option.Every time you run that it is going to make process bigger and bigger.You are not going to be able to do this in one function.I am a bit confused as to how this is supposed to work.Perhaps the best way is to have a hidden (dispplay:none) select that holds the orginal values that will be used to refill then when process should be refilled just delete all options (process.options.length=0) and copy all the options from the hidden slect to process.Can you post a screen shot of your page maybe I will understand better what exactly you are tryign to do.

[aspnetguy]

here are some snippets that should help you

var i;var reserveListLoaded = false;var reserveList = document.createElement('select');var processGroup = document.getElementById('processGroup');var process = document.getElementById('process');function removeOptions(){  //your code}function restoreOptions(){  if(!reserveListLoaded)  {	reserveListLoaded = true;	for(i=0;i<process.options.length;i++)	{	  reserveList.options[i] = process.options[i];	}  }    for(i=0;i<reserveList.options.length;i++)  {	process.options[i] = null;	process.options[i] = reserveList.options[i];  }}function processGroupOnChange(){  restoreOptions();  removeOptions();}<select id="processGroup" onchange="processGroupOnChange()">...</select>

[vchris]

Thanks a lot aspnetguy for the help. I pasted the code and still have some errors.Error: reserveList.options has no propertiesError: process has no propertiesThe only thing I changed was the removeOptions function. I added the onchange in processGroup select.

var i;var reserveListLoaded = false;var reserveList = new Array();var processGroup = document.getElementById('processGroup');var processLength = document.getElementById('process').options.length;var process = document.getElementById('process');function removeOptions() {  for(i=processLength-1;i>=0;i--)   {		if(processGroup.options[processGroup.selectedIndex].value != process.options[i].value && process.options[i].value != 'default' && processGroup.options[processGroup.selectedIndex].value != 'default')		{			process.remove(i);		}	}}function restoreOptions() {  if(!reserveListLoaded)   {	reserveListLoaded = true;	for(i=0;i<process.options.length;i++) 	{	  reserveList.options[i] = process.options[i];	}  }    for(i=0;i<reserveList.options.length;i++)  {	process.options[i] = null;	process.options[i] = reserveList.options[i];  }}function processGroupOnChange(){  restoreOptions();  removeOptions();}

[aspnetguy]

lol you got tot he code before I finished hte edit.change new Array() todocument.createElement('select');you do have a <select> with and id="process", right? you have to have id="process" not just name="process".

[vchris]

Yes I have a select with id process. I will recopy your code.Still getting error: Error: document.getElementById("process") has no propertiesWhich is the arrowed line.

var process = document.getElementById('process');...for(i=processLength-1;i>=0;i--)   {		if(processGroup.options[processGroup.selectedIndex].value != process.options[i].value && process.options[i].value != 'default' && processGroup.options[processGroup.selectedIndex].value != 'default')		{			process.remove(i); <-------------		}	}...<select name="process" id="process">...

It's funny because that part worked fine before.

[aspnetguy]

is process being delared more than once?can you post all the javascript for this page and related HTML?

[vchris]

I don't think process is being declared more than once.

<cfparam name="processGroup" default=""><cfparam name="sourceName" default=""><script language="javascript"><!-- Function that makes certain form elements appear -->function showElements() {	if(document.getElementById('docType').value == 20){		document.getElementById('estMethodContainer').style.display = 'block';	} else {		document.getElementById('estMethodContainer').style.display = 'none';	}}function toggleVisible(itemName) {	<!-- Erase containers on new selection -->	document.getElementById('sourceTypeContainer').style.display = 'none';	document.getElementById('CASNumberContainer').style.display = 'none';	document.getElementById('ISICCodeContainer').style.display = 'none';	document.getElementById('processGroupContainer').style.display = 'none';	document.getElementById('processContainer').style.display = 'none';	document.getElementById('areaSourceContainer').style.display = 'none';	document.getElementById('docTypeContainer').style.display = 'none';	document.getElementById('estMethodContainer').style.display = 'none';		switch(itemName) {		<!-- Source Classification -->		case 'Point Source':			document.getElementById('sourceTypeContainer').style.display = 'block';			break;		case 'Non-Point Source':			document.getElementById('areaSourceContainer').style.display = 'block';			document.getElementById('docTypeContainer').style.display = 'block';			break;							<!-- Source Types -->		case 'Industry':			document.getElementById('sourceTypeContainer').style.display = 'block';			document.getElementById('ISICCodeContainer').style.display = 'block';			document.getElementById('docTypeContainer').style.display = 'block';			break;		case 'Industrial Process/Activity':			document.getElementById('sourceTypeContainer').style.display = 'block';			document.getElementById('processGroupContainer').style.display = 'block';			document.getElementById('processContainer').style.display = 'block';			document.getElementById('docTypeContainer').style.display = 'block';			document.getElementById('estMethodContainer').style.display = 'block';			break;		case 'Chemicals':			document.getElementById('sourceTypeContainer').style.display = 'block';			document.getElementById('CASNumberContainer').style.display = 'block';			document.getElementById('docTypeContainer').style.display = 'block';			break;	}}var i;var reserveListLoaded = false;var reserveList = document.createElement('select');var processLength = document.getElementById('process').options.length;var processGroup = document.getElementById('processGroup');var process = document.getElementById('process');function removeOptions(){  for(i=processLength-1;i>=0;i--)   {		if(processGroup.options[processGroup.selectedIndex].value != process.options[i].value && process.options[i].value != 'default' && processGroup.options[processGroup.selectedIndex].value != 'default')		{			process.remove(i);		}	}}function restoreOptions(){  if(!reserveListLoaded)  {    reserveListLoaded = true;    for(i=0;i<process.options.length;i++)    {      reserveList.options[i] = process.options[i];    }  }    for(i=0;i<reserveList.options.length;i++)  {    process.options[i] = null;    process.options[i] = reserveList.options[i];  }}function processGroupOnChange(){  restoreOptions();  removeOptions();}</script>...<div id="processGroupContainer">			<p><label>Process Group <span class="star">*</span></label>			<select name="processGroup" id="processGroup" onchange="processGroupOnChange();">				<option value="default">Make a Selection</option>				<cfoutput query="getProcessGroup">					<option value="#getProcessGroup.ProcessGroup_Code#">#getProcessGroup.Description_E#</option>				</cfoutput>			</select></p>		</div>				<div id="processContainer">			<p><label>Process <span class="star">*</span> <span class="small"><a href="/pdbis/oecd/oecd/admin/addproc.cfm" target="_blank" id="addProcessLink">Add Process</a></span></label>			<select name="process" id="process">				<option value="default">Make a Selection</option>				<cfoutput query="getProcess">					<option value="#getProcess.ProcessGroup_Code#">#getProcess.Description_E#</option>				</cfoutput>			</select></p>		</div>...

[aspnetguy]

ok I see the trouble. I need you to change this block of code

var i;var reserveListLoaded = false;var reserveList = document.createElement('select');var processLength = document.getElementById('process').options.length;var processGroup = document.getElementById('processGroup');var process = document.getElementById('process');

to

var i;var reserveListLoaded = false;var reserveList;var processLength;var processGroup;var process;

then just before </body> place this block of code

reserveList = document.createElement('select');process = document.getElementById('process');processLength = process.options.length;processGroup = document.getElementById('processGroup');process = document.getElementById('process');

that will fix the error...I was trying to get the process select before the HTML had even created it.

[vchris]

2 process??reserveList = document.createElement('select');process = document.getElementById('process');processLength = process.options.length;processGroup = document.getElementById('processGroup');process = document.getElementById('process');I'm guessing that's an error.

[aspnetguy]

yeah, delete the 2nd one, sorry

[vchris]

Still get Error: process.options has no properties.It's always the same 4 options in the 2nd select that load after onChange. Maybe it's just because of the above error.