473,385 Members | 1,620 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Dropdown list in javascript, Data from XML file

ift40458
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
10 14540
acoder
16,027 Expert Mod 8TB
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
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
16,027 Expert Mod 8TB
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
Any more information ??????
Nov 28 '07 #5
acoder
16,027 Expert Mod 8TB
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
can u tell me ur E-mail ID
Nov 28 '07 #7
acoder
16,027 Expert Mod 8TB
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
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
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
16,027 Expert Mod 8TB
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

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

Similar topics

1
by: Joseph Barron | last post by:
Here is a SIMPLE problem that I'm trying to solve. It works in Netscape 6.2, but IE6 gives ""No such interface supported." Below are page1.htm and page2.htm . In page1.htm, there are two...
1
by: Rod Early | last post by:
I need to know when the select element's dropdown list is opened (as when the user clicks on the arrow or does ALT-downarrow from the keyboard). Similarly, I need to known when the dropdown list...
4
by: anonymous | last post by:
Hi Folks, I have a form with two Dropdown list boxes, which get loaded with data from Database. DropDownList1 gets data from Table1 and DropDownList2 gets data from Table2 Table1 has a...
3
by: RJN | last post by:
Hi The texts in the dropdown are too long and the width is not sufficient to show the entire text. Increasing the width is not an option. Is there a way to show the selected item text as a...
1
by: bbdobuddy | last post by:
Hi, I have a connection to a SQL database. One of the tables in the SQL Database is DefendentInformation. I would like to get the firstName and lastName fields from that table combine them...
11
by: eureka | last post by:
Hi All, I'm training in Servlets, JSP and JavaScript, I have a web page in which there's a "StudentName" textbox and below it is a "Names" Dropdown list. Initially the Textbox is empty and...
7
by: =?Utf-8?B?Qw==?= | last post by:
I have a dropdown list as below. I add an onchnage attribute in my codebehind to call some Javascript. I want to get the selected text from my dropdown. What am I doing wrong below? ...
1
by: fran7 | last post by:
Hi, Anyone know how to populate a dropdown list with data from database. I have an interface that generates the following code for names in my database. ..asp <%If Trim(rsCard("Author"))<>""...
5
by: abhi3211 | last post by:
i am using java inside java script page. in that page i want to use two dropdown list. in first dropdown list i am getting data from ms-access database. in second dropdown list i want to get data...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.