Get Values in Deropdown when a value is selected from another dropdown

Question

My Web Page has two Dropdown list 1) Containing Book Name 2) Containing link Of the Book. The Data is stored in form of XML File something like this:

<?xml version="1.0" encoding="UTF-8"?>
<BookDetail>
<book>
    <bookName>Dollar Bahu</bookName>
    <link>http:\\DollarBahu.in</link>
</book>
<book>
    <bookName>The Lost Symbol</bookName>
    <link>http:\\TheLostSymbol.in</link>
</book>
<book>
    <bookName>Keep The Change</bookName>
    <link>http:\\KeepTheChange.in</link>
</book>
</BookDetail>

Function: window.onload=function() { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "bookDetails.xml", false); xhttp.send(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { var xml = xhttp.responseXML; var books = xml.getElementsByTagName('book'); var book = document.getElementById('book'), link = document.getElementById('link');

                    for (i = 0; i < books.length; i++)
                    {
                        var obook = document.createElement('option'),
                        olink = document.createElement('option'),
                        tbook =   document.createTextNode(books[i].children[0].innerHTML),
                        tlink =   document.createTextNode(books[i].children[1].innerHTML);

                        obook.appendChild(tbook);
                        olink.appendChild(tlink);
                        book.appendChild(obook);
                        link.appendChild(olink);
                        map[tbook] = olink;
                    }
                    var updateLink = function(e)
                    {
                        //map[e.target.value].setAttribute('selected','');
                        //alert(map[e.target.value]);
                        for (var i = 0; i< link.children.length; i++)
                        {
                            link.children[i].removeAttribute('selected');
                        }
                           link.children[this.selectedIndex].setAttribute('selected','');
                    };
                    book.addEventListener('change', updateLink, false);
                }


                //var xmlString = "<BookDetail><book>    <bookName>Dollar Bahu</bookName>    <link>http:\\DollarBahu.in</link></book><book>    <bookName>The Lost Symbol</bookName>    <link>http:\\TheLostSymbol.in</link></book><book>    <bookName>Keep The Change</bookName>    <link>http:\\KeepTheChange.in</link></book></BookDetail>";
                //var xml = ( new window.DOMParser() ).parseFromString(xmlString, "text/xml"),i,
                //map = {};

            }

        }
    </script>

I have successively inserted valus in first dropdown list containing bookName. Now my question is how to get book link in second dropdown list of that particular bookName from XML?

Answer 1

This is the complete working solution:

  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "book.xml");
  xhttp.send();
  xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var books = xhttp.responseXML.getElementsByTagName('book');
        var book = document.getElementById('book'),
        link = document.getElementById('link');

        for (i = 0; i < books.length; i++) {
            var obook = document.createElement('option'),
                olink = document.createElement('option'),
                tbook = document.createTextNode(books[i].children[0].innerHTML),
                tlink = document.createTextNode(books[i].children[1].innerHTML);

            obook.appendChild(tbook);
            olink.appendChild(tlink);

            book.appendChild(obook);     
            link.appendChild(olink);      
    }
  }
}

var updateLink = function(e) {
    for (var i = 0; i< link.children.length; i++) {
        link.children[i].removeAttribute('selected');
    }
    link.children[this.selectedIndex].setAttribute('selected','');
};

book.addEventListener('change', updateLink, false);

With this HTML:

<!doctype html>
<html>
<meta charset="utf-8" />
<head>
</head>
<body>
  <select name="book" id="book">
  </select>
  <select name="link" id="link">
  </select>
  <script type="text/javascript" src="main.js"></script>
</body>
</html>

This is book.xml

<?xml version="1.0" encoding="UTF-8"?>
<BookDetail>
<book>
    <bookName>Dollar Bahu</bookName>
    <link>http:\\DollarBahu.in</link>
</book>
<book>
    <bookName>The Lost Symbol</bookName>
    <link>http:\\TheLostSymbol.in</link>
</book>
<book>
    <bookName>Keep The Change</bookName>
    <link>http:\\KeepTheChange.in</link>
</book>
</BookDetail>

Answer 2

In the onchange event of the bookName dropdown you can retrieve the selectedIndex property, and then use that value to get the corresponding book link.