[英]NgModel isn't reflecting the selected value from a dropdown whose values get populated based on another dropdown
[英]Get Values in Deropdown when a value is selected from another dropdown
我的网页有两个下拉列表1)包含书名2)包含书的链接。 数据以XML File的形式存储,如下所示:
<?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 = 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>
我已经在包含bookName的第一个下拉列表中依次插入了值。 现在我的问题是如何从XML获取该特定bookName的第二个下拉列表中的图书链接?
在bookName下拉列表的onchange事件中,您可以检索selectedIndex属性,然后使用该值获取相应的书本链接。
这是完整的工作解决方案:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.