Jump to content

Dropdowns And Population


Recommended Posts

The HTML document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>v8:ColdSteel</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><script language="Javascript" type="text/javascript" src="JavaScript/js_testing3.js"></script></head><body><form action"#">	<table>		<tr>			<td> Select a plan:</td>			<td>				<select id="selectOne">					<option value="">---</option>					<option value="0">Option 1</option>					<option value="1">Option 2</option>					<option value="2">Option 3</option>				</select>			</td>			<td>				<select id="selectTwo">					 				</select>			</td>		</tr>		<tr>			<td> 			</td>		</tr>	</table></form></body></html>

The js_testing3.js

window.onload = initAll;function initAll() {	document.getElementById("selectOne").selectedIndex = 0;	document.getElementById("selectOne").onchange = priceDisplay;}/* Output what they select */function priceDisplay() {	var selectedOptOne = this.options[this.selectedIndex].value;	document.getElementById("selectTwo").innerHTML = populateSelectionList + selectedOptOne +();	return false;}/* Getting the selections */function populateSelectionList0() {	document.getElementById("selectTwo").innerHTML = "<option value='0>Price a1</option><option value='0>Price a2</option><option value='0>Price a3</option>";	return true;}function populateSelectionList1() {	document.getElementById("selectTwo").innerHTML = "<option value='0>Price b1</option><option value='0>Price b2</option><option value='0>Price b3</option>";		return true;}

Ok, first, I know this is a big mess, but I'm trying to learn, which is why I'm here :)Second, what's going on. When the user makes a selection in the first <select> (document.getElementById("selectOne").onchange = priceDisplay;), then the options are populated inside the second <select> (document.getElementById("selectTwo").innerHTML = "whatever I want to put as options":) based on the choice that was made in the first <select>. Right now, this script does not work, and I need, it seems, lots of help to get it to work.

Edited by Caligo
Link to post
Share on other sites

It helps to remember that innerHTML was originally an Explorer invention, designed to simplify things. Later picked up by W3 and supported by Firefox et al. But some browsers (notably IE) don't like it for certain things, like adding options to a select element. This page shows you how to do that using the original DOM method. And for extra weirdness, note the difference in the W3 standard and the IE method.http://www.w3schools.com/htmldom/met_select_add.asp

Link to post
Share on other sites

I thank you, I shall look at it.I have since changed the code, but it still may be the same issue that is causing it not to work.HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>v8:ColdSteel</title><link rel="stylesheet" href="css/style.css" /><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><script language="Javascript" type="text/javascript" src="JavaScript/js_testing3.js"></script></head><body><form action"#">Select a plan:	<select id="selectOne">		<option value="">---</option>		<option value="0">Option 1</option>		<option value="1">Option 2</option>		<option value="2">Option 3</option>	</select>	<select id="selectTwo">		<option value="">---</option>	</select></form></body></html>

java script:

window.onload = initAll;function initAll() {	document.getElementById("selectOne").selectedIndex = 0;	document.getElementById("selectOne").onchange = populateSelectionList;}function populateSelectionList() {	var selectedOptOne = this.options[this.selectedIndex].value;		if (selectedOptOne = "") {		document.getElementById("selectTwo").innerHTML = "<option value=''>---</option>";	}		else-if (selectedOptOne = "0") {			document.getElementById("selectTwo").innerHTML = "<option value='0'>Price a1</option><option value='0'>Price a2</option><option value='0'>Price a3</option>";	}		else-if (selectedOptOne = "1") {		document.getElementById("selectTwo").innerHTML = "<option value='0'>Price b1</option><option value='0'>Price b2</option><option value='0'>Price b3</option>";	}		else (selectedOptOne = "2") {		document.getElementById("selectTwo").innerHTML = "<option value='0'>Price b1</option><option value='0'>Price b2</option><option value='0'>Price b3</option>";	}	return true;}

I am still trying to accomplish the same thing, but since the first way wasn't working, I tried it a bit differently, which this one seems a little cleaner, I believe. Again, it may still be the same problem as before, but if you could offer any other advice, I'd be very grateful!

Link to post
Share on other sites

1. it is the same problem. For all I know, Firefox 3.5 will accept it, but I'm pretty sure IE6-7 will not. Use those DOM methods.2. There is no hyphen between the words "else" and "if." Write else if

Edited by Deirdre's Dad
Link to post
Share on other sites

Ok, I have redone the whole thing without the use of .innerHTML, but I have some questions now.Which of the following is better to use? document.createElement('option'); new Option(); Next, I would like the "selectTwo" to have multiple options when a selection in "selectOne" is made, how do I do that? All I can seem to have is one option. Third, a question on my "if" statement. How can I cause "selectTwo" to be cleared of all options, instead of just the first option in the list? (currently I use x.remove(x) which only removes one option)HTML:

<html><head><script language="Javascript" type="text/javascript" src="JavaScript/insertOption.js"></script></head><body><form><select id="selectOne"><option value="">Choices</option><option value="0">Apple</option><option value="1">Pear</option><option value="2">Banana</option><option value="3">Orange</option></select><select id="selectTwo"></select></form></body></html>

JS:

window.onload = initSubmit;function initSubmit() {	document.getElementById("selectOne").selectedIndex = 0;	document.getElementById("selectOne").onchange = insertOption;}function insertOption() {	var selectedOneOpt = this.options[this.selectedIndex].value;/* var createOption = document.createElement('option'); */var createOption = new Option();var x = document.getElementById("selectTwo");	if (selectedOneOpt == "") {		try {		  x.remove(x);		}		catch(ex) {		  x.remove(x);		}	}	else if (selectedOneOpt == 0) {		createOption.text = 'Option0';		try {			x.remove(x);			x.add(createOption,null);		}		catch(ex) {			x.remove(x);			x.add(createOption);		}	}	else if (selectedOneOpt == 1) {		createOption.text = 'Option1';				try {			x.remove(x);			x.add(createOption,null);		}		catch(ex) {			x.remove(x);			x.add(createOption);		}	}	else if (selectedOneOpt == 2) {		createOption.text = 'Option2';		try {			x.remove(x);			x.add(createOption,null);		}		catch(ex) {			x.remove(x);			x.add(createOption);		}	}		else {		createOption.text = 'Option3';		try {			x.remove(x);			x.add(createOption,null);		}		catch(ex) {			x.remove(x);			x.add(createOption);		}	}}

Link to post
Share on other sites

1. document.createElement('option');2. new Option();With item 1, you have to add all the option's properties in subsequent statements. With item 2, you can pass the properties to the constructor function all at once: var y=new Option('Kiwi', 'Kiwi.com'); A good explanation: http://www.devguru.com/Technologies/ecmaSc...ref/option.htmlMultiple selection box here: http://www.w3schools.com/tags/att_select_multiple.aspYou can remove all the options in a select element by using a simple loop:

var x;var sel = document.getElementById("selectTwo");while (x = sel.options[0]) {	sel.remove(x);}

Link to post
Share on other sites

So it won't work then because its apparently read only? PITY IT DOES WORK THEN! you are setting the length options to 0, in effect removing all options.length is not just for reading the length of total elements, characters etc. it can be used to set for example, the length of array object, to expand or contract the array, or in this case, number of options.

Edited by dsonesuk
Link to post
Share on other sites

I looked into this. According to the spec, select.length is a read-only property, even in HTML5. In practice, it can be used as a read-write property in all browsers I've tested, but that is not in the spec.On the other hand, the spec does define select.options.length as a read-write property. So dsonesuk is correct as far as that goes. His method for deleting the options in a select object is better than the old-fashioned while loop that I suggested.But it is incorrect to suggest that length is universally a read-write property. For example, trying to set the value of a tableRow.cells.length property will throw an error, while setting the length of a string does nothing at all.And we must always be careful not to confuse JavaScript objects with DOM objects. For example, the select.options object is a "collection", not a true array. It has a length property, but no splice() method, for instance.

Edited by Deirdre's Dad
Link to post
Share on other sites

Thank you both for the help, much appreciated. I have since figured out how to all of what I was asking, but what you have said will help me improve it. I am working on some other things with it, and I will, I'm sure, have more questions in the near future.

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