By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,224 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Dropdown list in javascript, Data from XML file

ift40458
P: 13
Hi frnds,

I just want to create a triple drop down list in javascript, for that drop down menus data is to be extracted from XML file...

pls help me in this.....


Thanks in Advance
Nov 23 '07 #1
Share this Question
Share on Google+
10 Replies


acoder
Expert Mod 15k+
P: 16,027
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?
Nov 23 '07 #2

ift40458
P: 13
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..
Nov 26 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Nov 26 '07 #4

ift40458
P: 13
Any more information ??????
Nov 28 '07 #5

acoder
Expert Mod 15k+
P: 16,027
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?
Nov 28 '07 #6

ift40458
P: 13
can u tell me ur E-mail ID
Nov 28 '07 #7

acoder
Expert Mod 15k+
P: 16,027
can u tell me ur E-mail ID
No, I'll help you on the forums. This way everyone can benefit.
Nov 28 '07 #8

ift40458
P: 13
This is my XML file,

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


Expand|Select|Wrap|Line Numbers
  1. <?xml version = "1.0"?><!-- DWXMLSource=world.xml" -->
  2.  
  3. <!-- reference XSL stylesheet URI   -->
  4. <xsl:stylesheet version = "1.0" 
  5.    xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">
  6.  
  7.    <xsl:output method = "html" omit-xml-declaration = "no" 
  8.       doctype-system = 
  9.          "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 
  10.       doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN"/>
  11.  
  12.    <xsl:template match = "/"> <!-- match root element -->
  13.  
  14.       <html xmlns="http://www.w3.org/1999/xhtml">
  15.  
  16.          <head>
  17.             <title>world</title>
  18.          </head>
  19.   <script language="javascript">
  20.  
  21.   function show1(cval)
  22.   {
  23.    var choice = document.formname.drop1.options[document.formname.drop1.selectedIndex].value;
  24.    alert("choice:"+choice)
  25.    alert("test1:"+cval);
  26.          alert(<xsl:value-of select = "@id"/>)
  27.  
  28.   }
  29.   function show(cva)
  30.   {
  31.    alert("test2:"+cva);
  32.  
  33.   }
  34.   </script>
  35.          <body>
  36.  
  37.  
  38.  
  39.     <form name="formname">
  40.       <select name="drop1" onchange="show1()">
  41.                     <xsl:for-each select = "world/country/state">
  42.                       <option><xsl:value-of select = "city"/></option>
  43.                     </xsl:for-each>
  44.                   </select>
  45.           </form>
  46.  
  47.                 <form name="formname1">
  48.                   <select name="drop12" onchange="javascript: show(this.value)">
  49.                     <xsl:for-each select = "world/country/state">
  50.  
  51.                       <option ><xsl:value-of select = "@id"/></option>
  52.                     </xsl:for-each>
  53.                   </select>
  54.                 </form>
  55.  
  56.          </body>
  57.  
  58.       </html>
  59.  
  60.    </xsl:template>
  61.  
  62. </xsl:stylesheet>
  63.  
---------------------------------------XML File------------------------------------------

and this HTML

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

[HTML]<html>
<body>

<script language="javascript">

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
xmlDoc.async="false"
xmlDoc.load("world.xml")//loading an XML file
document.write("<table><tr><td>")
//fetching the values of the tag "country"
var y=xmlDoc.getElementsByTagName('country')
document.write("<td><select size='2' multiple='multiple' 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.getElementsByTagName('state')//fetching the values of the tag "state"
document.write("<select size='3' multiple='multiple' 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.getElementsByTagName('city')//fetching the values of the tag "city"
document.write("<select size='4' multiple='multiple' >");
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
Nov 28 '07 #9

ift40458
P: 13
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------------------------------------------


Expand|Select|Wrap|Line Numbers
  1. <?xml version = "1.0"?>
  2. <?xml:stylesheet type = "text/xsl" href = "world.xsl"?>
  3. <world>
  4. <country id="1"> India 
  5. <state id="11" country="1" name="sss"> Andhra 
  6. <city id="111" state ="11" country ="1" > Hyderabad </city> 
  7. <city id="211" state ="11" country ="1" >Tirupati </city> 
  8. </state>
  9. <state id="12" country="1"  name="sss"> Delhi
  10. <city id="112" state="12" country ="1" > Newelhi </city>
  11. <city id="212" state ="12" country ="1" > delhiity </city>
  12. </state>
  13. </country>
  14. <country id="2"> Nepal 
  15. <state id="21" country ="2"  Name="sss">Nstate1
  16. <city id="121" state ="21" country ="2" >Ncity11</city>
  17. <city id="221" state ="21" country ="2" >Ncity12</city>
  18. </state>
  19. <state id="22" country ="2"  name="sss">Nstate2</state>
  20. <city id="122" state ="22" country ="2" >Ncity21</city>
  21. <city id="222" state ="22" country ="2" >Ncity22</city>
  22.  
  23. </country>
  24. <country id="3"> Srilanka 
  25. <state id="31" country ="3"  name="sss">Sstate1
  26. <city id="131" state ="31" country ="3" >Scity11</city>
  27. <city id="231" state ="31" country ="3" >Scity12</city>
  28. </state>
  29. <state id="32" country ="3"  name="sss">Sstate2
  30. <city id="132" state ="32" country ="3" >Scity21 </city>
  31. <city id="232" state ="32" country ="3" >Scity22</city>
  32. </state>
  33. </country>
  34. </world>
  35.  
---------------------------------------XML File------------------------------------------

and this HTML

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

[HTML]<html>
<body>

<script language="javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. var xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
  2. xmlDoc.async="false"
  3. xmlDoc.load("world.xml")//loading an XML file
  4. document.write("<table><tr><td>")
  5. //fetching the values of the tag "country"
  6. var y=xmlDoc.getElementsByTagName('country')
  7. document.write("<td><select size='2' multiple='multiple' onchange='show(this.value)'>");
  8. for (i=0;i<y.length;i++)
  9. {
  10. document.write("<option value="+(i+1)+">")
  11. document.write(y[i].childNodes[0].nodeValue)
  12. document.write("<br />")
  13. document.write("</option>")
  14. }
  15. document.write("</select></td>")
  16. function show(u)
  17. {
  18. document.all['ss'].style.display = 'block';
  19. }
  20. document.write("<td><div id='ss' style='display:none;'>")
  21. var z=xmlDoc.getElementsByTagName('state')//fetching the values of the tag "state"
  22. document.write("<select size='3' multiple='multiple' onchange='show1(this.value)'>");
  23. for (i=0;i<z.length;i++)
  24. {
  25. document.write("<option value="+(i+1)+">")
  26. document.write(z[i].childNodes[0].nodeValue)
  27. document.write("<br />")
  28. document.write("</option>")
  29. }
  30. document.write("</select>")
  31. document.write("</div></td>")
  32. function show1(u)
  33. {
  34. var r=u
  35. document.all['ss1'].style.display = 'block';
  36. }
  37.  
  38. document.write("<td><div id='ss1' style='display:none;'>")
  39. var s=xmlDoc.getElementsByTagName('city')//fetching the values of the tag "city"
  40. document.write("<select size='4' multiple='multiple' >");
  41. for (i=0;i<s.length;i++)
  42. {
  43. document.write("<option>")
  44. document.write(s[i].childNodes[0].nodeValue)
  45. document.write("<br />")
  46. document.write("</option>")
  47. }
  48. document.write("</select>")
  49. document.write("</div></td></tr></table>")
  50.  
[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
Nov 28 '07 #10

acoder
Expert Mod 15k+
P: 16,027
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).
Nov 28 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.