Jump to content

Adding options in select


Recommended Posts

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;}

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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]);}

Link to post
Share on other sites

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;}

Link to post
Share on other sites

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]);}

Link to post
Share on other sites
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?

Link to post
Share on other sites

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>');}

Link to post
Share on other sites

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);					}	}}

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>

Link to post
Share on other sites

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();}

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...