Forums | MacLife

resedit · 2009-01-23 10:06 am

I have to do what I want to do in DOM2 because I'm using xhtml.

Here's what I want to do -

inside a form -

Code:

<div id="something">
<select id="else" name="else">
... big long list of options, and I mean big long list of options
</select>
</div>

If the user has JavaScript enabled, I want to use javascript onload to replace the contents of the div - so that instead of one select list with a big long list of options, it has two option lists - where selecting an option in that list alters the available options in the second select list with id="bar".

The idea is that the form is still quite usable by people without JavaScript enabled, but if they have JavaScript enabled, they get an easier to manage way of selecting the option (because the options nicely group)

I gather this requires a decent understanding of DOM2 to correctly pull off.
Unfortunately the big fat expensive JavaScript book I bought a couple years ago only briefly mentions DOM2 and doesn't really cover it all, but only covers DOM which is obsolete with xhtml.

Any recommendations on decent DOM2 tutorials?

resedit · 2009-01-23 10:37 am

Looks like want I want to do is have the select list for non javascript contained in noscript and use javascript to add the two lists via onload. That way I don't need to replace the list for non javascript users, only need to add the lists for javascript users.

resedit · 2009-01-23 10:44 am

http://developer.apple.com/internet/web … dom2i.html

That looks like one decent document with examples similar to what I want to do.

resedit · 2009-01-23 11:13 am

A start -

Code:

<head><title>test</title></head>
<body>
<form id="test">

<noscript>
<select id="bar" name="bar">
   <option value="" selected="selected">Select an Option</option>
   <option value="a">Option A</option>
   <option value="b">Option B</option>
   <option value="c">Option C</option>
   <option value="d">Option D</option>
   <option value="e">Option E</option>
   <option value="f">Option F</option>
   <option value="g">Option G</option>
   <option value="h">Option H</option>
   <option value="i">Option I</option>
</select>
</noscript>
</form>

<script type="text/javascript">
<![CDATA[
var newSelectOne = document.createElement("select");
newSelectOne.setAttribute("name","foo");

var newListOneOptionOne = document.createElement("option");
newListOneOptionOne.setAttribute("value","AC");
newListOneTextOne=document.createTextNode("Options A-C");
newListOneOptionOne.appendChild(newListOneTextOne);

var newListOneOptionTwo = document.createElement("option");
newListOneOptionTwo.setAttribute("value","DF");
newListOneTextTwo=document.createTextNode("Options D-F");
newListOneOptionTwo.appendChild(newListOneTextTwo);

newListOneOptionThree = document.createElement("option");
newListOneOptionThree.setAttribute("value","GI");
newListOneTextThree=document.createTextNode("Options G-I");
newListOneOptionThree.appendChild(newListOneTextThree);

newSelectOne.appendChild(newListOneOptionOne);
newSelectOne.appendChild(newListOneOptionTwo);
newSelectOne.appendChild(newListOneOptionThree);

var myForm = document.getElementById("test");
myForm.appendChild(newSelectOne);

]]>
</script>
</body></html>

I'll figure out the other part tomorrow, but at least that much works. Well, at least looks like it does.

resedit · 2009-01-23 2:28 pm

Not tomorrow, but -

Code:

<head><title>test</title></head>
<body>
<form id="test">

<noscript>
<select id="NoScriptBar" name="bar">
   <option value="" selected="selected">Select an Option</option>
   <option value="a">Option A</option>
   <option value="b">Option B</option>
   <option value="c">Option C</option>
   <option value="d">Option D</option>
   <option value="e">Option E</option>
   <option value="f">Option F</option>
   <option value="g">Option G</option>
   <option value="h">Option H</option>
   <option value="i">Option I</option>
</select>
</noscript>
</form>

<script type="text/javascript">
<![CDATA[
function addSelectOption(myselect,myvalue,mystring,isselected) {
   var newSelectOption = document.createElement("option");
   newSelectOption.setAttribute("value",myvalue);
   if (isselected) {
      newSelectOption.setAttribute("selected","selected");
      }
   newSelectText=document.createTextNode(mystring);
   newSelectOption.appendChild(newSelectText);
   myselect.appendChild(newSelectOption);
}

function menuUpdate(duck,list) {
   var mySelect = document.getElementById(list);
//   some function to remove all current options
   quack = document.getElementById(duck).selectedIndex;
   if (quack == "1") {
      addSelectOption(mySelect,"","-- Select --",true);
      addSelectOption(mySelect,"a","Option A",false);
      addSelectOption(mySelect,"b","Option B",false);
      addSelectOption(mySelect,"c","Option C",false);
      }
   else if (quack == "2") {
      addSelectOption(mySelect,"","-- Select --",true);
      addSelectOption(mySelect,"d","Option D",false);
      addSelectOption(mySelect,"e","Option E",false);
      addSelectOption(mySelect,"f","Option F",false);
      }
   else if (quack == "3") {
      addSelectOption(mySelect,"","-- Select --",true);
      addSelectOption(mySelect,"g","Option G",false);
      addSelectOption(mySelect,"h","Option H",false);
      addSelectOption(mySelect,"i","Option I",false);
      }
   else {
      addSelectOption(mySelect,"","----",true);
      }
   }

var newSelectOne = document.createElement("select");
newSelectOne.setAttribute("id","foo");
newSelectOne.setAttribute("name","foo");
newSelectOne.setAttribute("onchange","menuUpdate(this.id,\"bar\")");

var newSelectTwo = document.createElement("select");
newSelectTwo.setAttribute("name","bar");
newSelectTwo.setAttribute("id","bar");

addSelectOption(newSelectOne,"","-- Please Select --",true);
addSelectOption(newSelectOne,"AC","Options A-C",false);
addSelectOption(newSelectOne,"DF","Options D-F",false);
addSelectOption(newSelectOne,"GI","Options G-I",false);
addSelectOption(newSelectTwo,"","----",true);

var myForm = document.getElementById("test");
myForm.appendChild(newSelectOne);
myForm.appendChild(newSelectTwo);

]]>
</script>
</body>

does exactly what I want - er, it will, once I figure out how to remove all the options (children) currently in the select with id bar.

resedit · 2009-01-23 2:47 pm

Code:

function murderChildren(node) {
   var myNode = document.getElementById(node);
   if (myNode.hasChildNodes()) {
      while (myNode.childNodes.length >= 1) {
         myNode.removeChild(myNode.firstChild);
         }
      }
   }

And that's all she wrote. It works big_smile

Thank you Apple for explaining DOM by example.

matt · 2009-01-23 5:41 pm

How about

Code:

function murderChildren(nodeID){
   var thisParent = document.getElementById(nodeID);
   while (thisParent.childNodes.length > 0) {
         thisParent.removeChild(thisParent.firstChild);
   }
}

resedit · 2009-01-23 7:04 pm

I suppose the if in mine is kind of pointless.

resedit · 2009-01-26 3:04 am

Just a note - rather than using noscript for the non javascript created menu, I have the javascript kill that child - reason being that noscript is rather global in nature, not sure how browsers with some scripting languages enabled but others disabled would handle it (either now or in the future) but by having javascript delete it if javascript is enables, whether the noscript version of the menu is used or not is tied specifically to whether or not javascript is enabled.

Forums | MacLife

#1 2009-01-23 10:06 am

Good web sites for learning DOM2

Code:

#2 2009-01-23 10:37 am

Re: Good web sites for learning DOM2

#3 2009-01-23 10:44 am

Re: Good web sites for learning DOM2

#4 2009-01-23 11:13 am

Re: Good web sites for learning DOM2

Code:

#5 2009-01-23 2:28 pm

Re: Good web sites for learning DOM2

Code:

#6 2009-01-23 2:47 pm

Re: Good web sites for learning DOM2

Code:

#7 2009-01-23 5:41 pm

Re: Good web sites for learning DOM2

Code:

#8 2009-01-23 7:04 pm

Re: Good web sites for learning DOM2

#9 2009-01-26 3:04 am

Re: Good web sites for learning DOM2

Board footer