Caligo Posted August 20, 2009 Share Posted August 20, 2009 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. Link to comment Share on other sites More sharing options...
jeffman Posted August 20, 2009 Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
Caligo Posted August 20, 2009 Author Share Posted August 20, 2009 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 comment Share on other sites More sharing options...
jeffman Posted August 20, 2009 Share Posted August 20, 2009 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 Link to comment Share on other sites More sharing options...
Caligo Posted August 21, 2009 Author Share Posted August 21, 2009 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 comment Share on other sites More sharing options...
jeffman Posted August 21, 2009 Share Posted August 21, 2009 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 comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 wouldn't sel.options.length=0; do the same? Link to comment Share on other sites More sharing options...
Ingolme Posted August 22, 2009 Share Posted August 22, 2009 wouldn't sel.options.length=0; do the same? length is a read-only property. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 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. Link to comment Share on other sites More sharing options...
jeffman Posted August 22, 2009 Share Posted August 22, 2009 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 22, 2009 Share Posted August 22, 2009 totally agree, but i was careful not to suggest it was universal, or to treat select.options as an array. i just gave examples on how it could be used with an array, to prove it is not read-only property as stated. Link to comment Share on other sites More sharing options...
Caligo Posted August 22, 2009 Author Share Posted August 22, 2009 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 comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.