Dropdown list in javascript, Data from XML file

**acoder** · Nov 23 '07, 09:12 AM

What code have you got so far?

What do you mean by a triple dropdown list? Do you mean if you select from one, a different set of options appear in the second and depending on the selection i the second, another set appear in the third, e.g. country --> state --> city?

**ift40458** · Nov 26 '07, 03:15 AM

Yes,

Same as Country-->State-->City

Till now i've written a code in HTML using javascript to extract the data from XML file and show all the data in drop down lists.

Now iam able to show the drop down lists for country-->state-->City.

I've to interlink them, when one option selects in first list, corresponding states have to be display in second list, like that to third list..

Thanks in Advance..

**acoder** · Nov 26 '07, 08:52 AM

You have two choices: either load all the data at once into arrays or alternatively load only how much you need and change the dependent lists using Ajax (by retrieving the data depending on the selection).

For the first option, see this link.

**ift40458** · Nov 28 '07, 04:01 AM

Any more information ??????

**acoder** · Nov 28 '07, 09:22 AM

Originally posted by ift40458

Any more information ??????

So which option are you going to take? Load all the information from the server during page load or use Ajax to dynamically request the data?

**ift40458** · Nov 28 '07, 09:23 AM

can u tell me ur E-mail ID

**acoder** · Nov 28 '07, 09:42 AM

Originally posted by ift40458

can u tell me ur E-mail ID

No, I'll help you on the forums. This way everyone can benefit.

**ift40458** · Nov 28 '07, 09:55 AM

This is my XML file,

---------------------------------------XML File------------------------------------------

[CODE=xml]<?xml version = "1.0"?>


<xsl:styleshe et version = "1.0"
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">

<xsl:output method = "html" omit-xml-declaration = "no"
doctype-system =
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN"/>

<xsl:template match = "/"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>world</title>
</head>
<script language="javas cript">

function show1(cval)
{
var choice = document.formna me.drop1.option s[document.formna me.drop1.select edIndex].value;
alert("choice:" +choice)
alert("test1:"+ cval);
alert(<xsl:valu e-of select = "@id"/>)

}
function show(cva)
{
alert("test2:"+ cva);

}
</script>
<body>

<form name="formname" >
<select name="drop1" onchange="show1 ()">
<xsl:for-each select = "world/country/state">
<option><xsl:va lue-of select = "city"/></option>
</xsl:for-each>
</select>
</form>

<form name="formname1 ">
<select name="drop12" onchange="javas cript: show(this.value )">
<xsl:for-each select = "world/country/state">

<option ><xsl:value-of select = "@id"/></option>
</xsl:for-each>
</select>
</form>

</body>

</html>

</xsl:template>

</xsl:stylesheet>
[/CODE]
---------------------------------------XML File------------------------------------------

and this HTML

--------------------------------------HTML file------------------------------------------

[HTML]<html>
<body>

<script language="javas cript">

var xmlDoc = new ActiveXObject(" Microsoft.XMLDO M")
xmlDoc.async="f alse"
xmlDoc.load("wo rld.xml")//loading an XML file
document.write( "<table><tr><td >")
//fetching the values of the tag "country"
var y=xmlDoc.getEle mentsByTagName( 'country')
document.write( "<td><selec t size='2' multiple='multi ple' onchange='show( this.value)'>") ;
for (i=0;i<y.length ;i++)
{
document.write( "<option value="+(i+1)+" >")
document.write( y[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select></td>")
function show(u)
{
document.all['ss'].style.display = 'block';
}
document.write( "<td><div id='ss' style='display: none;'>")
var z=xmlDoc.getEle mentsByTagName( 'state')//fetching the values of the tag "state"
document.write( "<select size='3' multiple='multi ple' onchange='show1 (this.value)'>" );
for (i=0;i<z.length ;i++)
{
document.write( "<option value="+(i+1)+" >")
document.write( z[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select>")
document.write( "</div></td>")
function show1(u)
{
var r=u
document.all['ss1'].style.display = 'block';
}

document.write( "<td><div id='ss1' style='display: none;'>")
var s=xmlDoc.getEle mentsByTagName( 'city')//fetching the values of the tag "city"
document.write( "<select size='4' multiple='multi ple' >");
for (i=0;i<s.length ;i++)
{
document.write( "<option>")
document.write( s[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select>")
document.write( "</div></td></tr></table>")

</script>
</body>
</html>
[/HTML]--------------------------------------HTML file------------------------------------------

Here iam putting two files with this post,

one is XML file...

other is HTML file..

in this example , i can fetch the values from XML file and presented them
in three drop down lists..
offcourse they r connected... but i need to connect them as, when i
selected one option in first list, second list has to be filled with the
first option's corresponding values like that for third list also...

Have a look at these files and send me reply........

Expecting a favourable reply...

Thanks and Regards,
ift40458

**ift40458** · Nov 28 '07, 11:51 AM

Iam very sorry

Don't consider the previous post...

instead of XML file i posted XSL file.... it's a mistake...

u can check out here now..

This is my XML file,

---------------------------------------XML File------------------------------------------

[CODE=xml]<?xml version = "1.0"?>
<?xml:styleshee t type = "text/xsl" href = "world.xsl" ?>
<world>
<country id="1"> India
<state id="11" country="1" name="sss"> Andhra
<city id="111" state ="11" country ="1" > Hyderabad </city>
<city id="211" state ="11" country ="1" >Tirupati </city>
</state>
<state id="12" country="1" name="sss"> Delhi
<city id="112" state="12" country ="1" > Newelhi </city>
<city id="212" state ="12" country ="1" > delhiity </city>
</state>
</country>
<country id="2"> Nepal
<state id="21" country ="2" Name="sss">Nsta te1
<city id="121" state ="21" country ="2" >Ncity11</city>
<city id="221" state ="21" country ="2" >Ncity12</city>
</state>
<state id="22" country ="2" name="sss">Nsta te2</state>
<city id="122" state ="22" country ="2" >Ncity21</city>
<city id="222" state ="22" country ="2" >Ncity22</city>

</country>
<country id="3"> Srilanka
<state id="31" country ="3" name="sss">Ssta te1
<city id="131" state ="31" country ="3" >Scity11</city>
<city id="231" state ="31" country ="3" >Scity12</city>
</state>
<state id="32" country ="3" name="sss">Ssta te2
<city id="132" state ="32" country ="3" >Scity21 </city>
<city id="232" state ="32" country ="3" >Scity22</city>
</state>
</country>
</world>
[/CODE]

---------------------------------------XML File------------------------------------------

and this HTML

--------------------------------------HTML file------------------------------------------

[HTML]<html>
<body>

<script language="javas cript">
[/HTML]
[CODE=javascript]var xmlDoc = new ActiveXObject(" Microsoft.XMLDO M")
xmlDoc.async="f alse"
xmlDoc.load("wo rld.xml")//loading an XML file
document.write( "<table><tr><td >")
//fetching the values of the tag "country"
var y=xmlDoc.getEle mentsByTagName( 'country')
document.write( "<td><selec t size='2' multiple='multi ple' onchange='show( this.value)'>") ;
for (i=0;i<y.length ;i++)
{
document.write( "<option value="+(i+1)+" >")
document.write( y[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select></td>")
function show(u)
{
document.all['ss'].style.display = 'block';
}
document.write( "<td><div id='ss' style='display: none;'>")
var z=xmlDoc.getEle mentsByTagName( 'state')//fetching the values of the tag "state"
document.write( "<select size='3' multiple='multi ple' onchange='show1 (this.value)'>" );
for (i=0;i<z.length ;i++)
{
document.write( "<option value="+(i+1)+" >")
document.write( z[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select>")
document.write( "</div></td>")
function show1(u)
{
var r=u
document.all['ss1'].style.display = 'block';
}

document.write( "<td><div id='ss1' style='display: none;'>")
var s=xmlDoc.getEle mentsByTagName( 'city')//fetching the values of the tag "city"
document.write( "<select size='4' multiple='multi ple' >");
for (i=0;i<s.length ;i++)
{
document.write( "<option>")
document.write( s[i].childNodes[0].nodeValue)
document.write( "<br />")
document.write( "</option>")
}
document.write( "</select>")
document.write( "</div></td></tr></table>")
[/CODE]
[HTML]
</script>
</body>
</html>[/HTML]
--------------------------------------HTML file------------------------------------------

Here iam putting two files with this post,

one is XML file...

other is HTML file..

in this example , i can fetch the values from XML file and presented them
in three drop down lists..
offcourse they r connected... but i need to connect them as, when i
selected one option in first list, second list has to be filled with the
first option's corresponding values like that for third list also...

Have a look at these files and send me reply........

Expecting a favourable reply...

Thanks and Regards,
ift40458

**acoder** · Nov 28 '07, 01:10 PM

Firstly, your code would only work in IE. See a cross-browser example.

Store the options in arrays and replace the default options onchange. See the link that I posted earlier (in post #4).

Dropdown list in javascript, Data from XML file

Dropdown list in javascript, Data from XML file

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment