[SOLVED] JavaScript XML Dropdown List

scottybwoy · November 8, 2007

Hi,

I've been playing around with JS and XML for about a couple of days now and would like to know if this is possible.

I want to use Javascript to pull out all the options for my select menu, but can't get it working, here's what I have so far :

html

<body onload="loadXML();">
<select id='menu' class='in' onchange='go()' name='prodSelect' onload="">
		<option value=''>Select a product</option>
		<optgroup id='category' label=''>
			<option id='subcat' value=''></option>
		</optgroup>
	</select>
</body>

xml

<category title="Controllers">
<product>
	<modelid>MRI-2500U2/R</model_id>
	<link>http://www.mri.co.uk/products/Controllers/2500U2_R.htm</link>
</product>
<product>
	<modelid>MRI-2500UW/R</model_id>
	<link>http://www.mri.co.uk/products/Controllers/2500UW_R.htm</link>
</product>
</category>
<category title="InputOutput">
<product>
	<modelid>MRI-4S/ETHERNET/R</model_id>
	<link>http://www.mri.co.uk/products/InputOutput/ether4s.htm</link>
</product>
<product>
	<modelid>MRI-4S/USB/IS/R</model_id>
	<link>http://www.mri.co.uk/products/InputOutput/usb4sIs.htm</link>
</product>
</category>

js

var xmlDoc;
function loadXML() {
if (window.ActiveXObject) {
	// code for IE
	xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async=false;
	xmlDoc.load("http://www.mri.co.uk/xml/select_menu.xml");
	getmessage();
}	else if (document.implementation &&	document.implementation.createDocument) {
	// code for Mozilla, Firefox, Opera, etc.
	xmlDoc=document.implementation.createDocument("","",null);
	xmlDoc.load("http://www.mri.co.uk/xml/select_menu.xml");
	xmlDoc.onload=getmessage;
}	else {
	alert('Your browser cannot handle this script');
}
}

function getmessage() {
//the x variable will hold a NodeList
var x=xmlDoc.getElementsByTagName('category');

for (i=0;i<x.length;i++) {
	document.getElementById("category").label=x[i].getAttribute('title')[0];

	// Yeah I know these lines are wrong, just not at that stage yet
	document.getElementById("subcat").value=xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
	document.getElementById("subcat").innerHTML=xmlDoc.getElementsByTagName("modelid")[0].childNodes[0].nodeValue;
  }

}

As you can see, what I want is to take the category title from the xml and put that in the optgroup label attribute.

Then put all the links into the option value and the modelId into the innerHtml of the option.

So I can just update the one file and it will work accross the whole site.

Thanks, If you could point me into getting the syntax sorted for the HTML Dom I'd be greatful.

scottybwoy · November 13, 2007

Bump

scottybwoy · November 15, 2007

OK, I have this pretty much working, however there is a subtle problem with Internet Explorer, that I think is down to something to do with the javaScript syntax. I'll post all the code I have again so it can be followed.

What the problem is that the option for the select menu do are there and the link works but there is no text displaying the product code. Thanks for looking.

HTML

<body onload="postselect();">
<select id='menu' class='in' onchange='go()' name='menu'>
<option>Jump to Product</option>
</select>

XML

<?xml version="1.0" encoding="ISO-8859-1"?>
<select>
   <category type='Controllers'>
      <model name='MRI-2500U2/R' value='http://www.mri.co.uk/products/Controllers/2500U2_R.htm' />
      <model name='MRI-2500UW/R' value='http://www.mri.co.uk/products/Controllers/2500UW_R.htm' />
   </category>
   <category type='Input Output'>
      <model name='MRI-4S/ETHERNET/R' value='http://www.mri.co.uk/products/InputOutput/ether4s.htm' />
      <model name='MRI-4S/USB/IS/R' value='http://www.mri.co.uk/products/InputOutput/usb4sIs.htm' />
   </category>
</select>

JS

function postselect() {
xmlDoc=loadXMLDoc("http://www.mri.co.uk/xml/select_menu.xml");

var categories = xmlDoc.getElementsByTagName('category');
var numCats = categories.length;

for (var i=0; i<numCats; i++) {
	var optgrp = optNew = document.createElement("optgroup");
	optgrp.label = categories[i].getAttribute('type');
	document.getElementById("menu").appendChild(optgrp);

	var items = categories[i].getElementsByTagName('model');
	var numItems = items.length;

	for (var ii=0; ii<numItems; ii++) {
		var option = optNew = document.createElement("option");
		option.text = items[ii].getAttribute('name');
		option.value = items[ii].getAttribute('value');
		document.getElementById("menu").appendChild(option);
	}
}
}

scottybwoy · November 22, 2007

I solved this for anyone who also ran into this problem.

I changed this :

option.text = items[ii].getAttribute('name'); // Works in Firefox

// To this :

option.appendChild(document.createTextNode(items[ii].getAttribute('name')));
// Which works in firefox and Ie

Sign In

[SOLVED] JavaScript XML Dropdown List

Recommended Posts

scottybwoy

Link to comment

Share on other sites

scottybwoy

Link to comment

Share on other sites

scottybwoy

Link to comment

Share on other sites

scottybwoy

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information