Remove option in select

[vchris]

I filled the options in a select with an sql query. What I need to do now is to remove some of the options depending on the choice of the 1st select. This 2nd select options depends on the 1st select. How can I remove some options in a select with JS?

[aspnetguy]

document.getElementById('yourSelectBox').options[index] = null;

[vchris]

Sorry maybe I didn't precise. I want to remove on the options with a different value than the first select.Here's what I got:

var i;	process = document.getElementById('process');		document.write(process.options.length);		for(i = 0; i < process.options.length; i++) {		if(selectbox.options.selected.value == process.options[i].value) {			process.remove(i);		}	}

This should only remove certain options but somehow it says selectbox.options does not have any properties.

[aspnetguy]

replace selectbox.options.selected.value with

selectbox.options[selectBox.selectedIndex].value

and replace process.remove(i); with

process.options[i] = null);

[vchris]

I get an error: "selectbox.selectedIndex has no properties".my code

process = document.getElementById('process');for(i = 0; i < process.options.length; i++) {		if(selectbox.options[selectbox.selectedIndex].value == process.options[i].value) {			process.options[i] = null;		}	}

[aspnetguy]

can you post your whole page and I'll debug it.

[vchris]

JS:

function removeOptions(selectbox){	var i;	process = document.getElementById('process');		for(i = 0; i < process.options.length; i++) {		if(selectbox.options[selectbox.selectedIndex].value == process.options[i].value) {			process.options[i] = null;		}	}}

HTML:

<div id="processGroupContainer">			<p><label>Process Group <span class="star">*</span></label>			<select name="processGroup" id="processGroup" onChange="removeOptions(this.value);">				<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>

This form is very long and I don't think you'll need everything. This should be enough.

[aspnetguy]

change onChange="removeOptions(this.value);" to

onChange="removeOptions(this);"

That will solve the selectbox has no properties error. Anymore errors?

[vchris]

Great! Now it's working. Now I'll try and make it add back all the options onChange so they come back and I can just remove the ones that are not related to the option in select 1.EDIT:I guess I'll need to create a 2 dimensional array to store the values and description right?Seems like the script is working in removing some options but it doesn't seem like it's removing the right ones.For some reason when I select the last option (value = 60) I still have options in the 2nd select but there is not options in that select with the value of 60.I changed the code a bit but the same functionality is there like before.

for(i = 0; i < process.options.length; i++) {		if(selectbox.options[selectbox.selectedIndex].value != process.options[i].value && process.options[i].value != 'default' && selectbox.options[selectbox.selectedIndex].value != 'default') {			process.options[i] = null;		}	}

Here's the data I have:

Select 1:20 - Coincidental Manufacture30 - Combustion50 - Electroplating60 - Solid Waste Disposal40 - Spray Application or Organic Coatings10 - Wastewater Treatment------------------------Select 2:1050 - 30 - Anthracite Coal Combustion1110 - 30 - Bagasse Combustion in Sugar Mills1040 - 30 - Bituminous and Subbituminous Coal Combustion1060 - 30 - Fuel Oil Combustion1020 - 30 - Gasoline & Diesel Engines1010 - 30 - Heavy Duty Natural Gas1030 - 30 - Large Stationary Diesel1100 - 30 - Lignite Combustion1080 - 30 - Liquified Petroleum Gas Combustion1070 - 30 - Natural Gas Combustion1170 - 20 - Petroleum Refining1120 - 30 - Residential Fireplaces1130 - 30 - Residential Wood Stoves1000 - 30 - Stationary Gas Turbines1140 - 30 - Waste Oil Combustion1150 - 20 - Welding1180 - 20 - Wet Cooling Tower1160 - 20 - Wood preservation1090 - 30 - Wood Residue Combustion in Boilers

Basically the # 20, 30 is what I am comparing. I outputted i and it only went up to 9. I found out that the length of my select was going down so it only did half of it. Now I have declared a variable before my loop it the value doesn't go down anymore. Still I have a problem. For instance if you choose value 60 in the first select, there should not be any option in the second select since no value is 60 but there are some options in the 2nd select. I don't understand this...Are you sure this process.options = null; is correct?

[vchris]

Bump

[jesh]

Are you sure this process.options = null; is correct?

You might try going back to the .remove(i): http://www.w3schools.com/htmldom/met_select_remove.aspprocess.options = null probably works, it just might not work how you expect it to.

[vchris]

Well I am troubleshooting right now and when I only output i in my if statement I get 20 outputs which is correct but as soon as I add process.options = null and the i output there isn't 20 outputs. So I'm guessing it must be process.options = null.I'll try that thanks.EDIT:I get the same effect... hmmm...

[vchris]

I get this JS error: Error: process.options has no properties in here if(selectbox.options[selectbox.selectedIndex].value != process.options.value && process.options.value != 'default' && selectbox.options[selectbox.selectedIndex].value != 'default') {EDIT:I just thought about this. One of the choices should remove all of them and when I have only the i outputted it outputs 0-19, what it should output basically. Then when I add process.remove(i); the output is 1-10, 0 being "Make a Selection" so it skips it. Does it only go up to 10 because I am removing 1 option per loop?If I have 20 options in a select. I remove #1 does #2 become #1? If so that would explain my problem. Then how would I solve this?EDIT:Issue resolved. That was my problem. I went backwards instead. Started from length to 0.