从另一个下拉列表中选择值时获取下拉列表中的值答案

【问题标题】：Get Values in Deropdown when a value is selected from another dropdown从另一个下拉列表中选择值时获取下拉列表中的值
【发布时间】：2015-12-30 22:36:46
【问题描述】：

我的网页有两个下拉列表 1) 包含书名 2) 包含本书的链接。数据以 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>

功能： window.onload=函数（） { var xhttp = new XMLHttpRequest(); xhttp.open("GET", "bookDetails.xml", false); xhttp.send(); xhttp.onreadystatechange = 函数（） { 如果（xhttp.readyState == 4 && xhttp.status == 200） { var xml = xhttp.responseXML; var book = xml.getElementsByTagName('book'); var book = document.getElementById('book'), 链接 = 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>

我已在包含 bookName 的第一个下拉列表中连续插入值。现在我的问题是如何从 XML 中获取该特定 bookName 的第二个下拉列表中的书籍链接？

【问题讨论】：

您的预期行为是什么？如果我在第一个下拉列表中选择 Dollar Bahu，则应该在第二个下拉列表中选择 http:\\DollarBahu.in？或者第二个下拉列表应该只填充相关的链接？这没有多大意义，因为每本书只有一个链接，对吧？
是的，每本书只有一个链接。应该是如果我在第一个下拉列表中选择了一本特定的书（例如 Dollar Bahu）。应该选择第二个下拉列表及其相关链接（即 http:\\DollarBahu.in）我能够获取由用户但不知道如何使用它从 XML 文件中获取关联的链接。

标签： javascript html ajax xml xslt

【解决方案1】：

在 bookName 下拉列表的 onchange 事件中，您可以检索 selectedIndex 属性，然后使用该值获取相应的图书链接。

【讨论】：

你是对的，我做到了。我有用户选择的 bookName 但不知道如何使用它来检索相应的链接

【解决方案2】：

这是完整的工作解决方案：

  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);

使用此 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>

这是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>

【讨论】：

感谢您的帮助。但是如果我想直接从 XML 文件中获取数据而不使用 xmlString 并对其进行解析怎么办。您还有其他选择吗？ @Federico
我已经更新了我的函数。在线显示第一本书和第一个链接。没有进一步的数据显示@Federico
@Rish 我发布了我的工作解决方案。它可以正常工作。如果您仍有问题，请提供更多详细信息。