如何显示从列表中选择的用户？

当用户选择一个艺术家和标题后，点击'显示'按钮时，我想显示一张包含该艺术家和标题的所有信息（标题，艺术家，国家，公司，年份，价格）的表格。但我的代码只是运行第一个选项。我该如何解决它？如何显示从列表中选择的用户？

<!DOCTYPE html> 
 
<html> 
 
<style> 
 
table,th,td { 
 
    border : 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
th,td { 
 
    padding: 5px; 
 
} 
 
</style> 
 
<body> 
 
<form id="form1"> 
 
<select name="Artist"> 
 
<option value="Artist"> Choose an Artist </option> 
 
<option value="1"> Bob Dylan </option> 
 
<option value="2">Bonnie Tyler </option> 
 
<option value="3"> Dolly Parton </option> 
 
</select> 
 
<select name="Title"> 
 
<option value="-Title"> -Choose the title </option> 
 
<option value="a"> Empire Burlesque </option> 
 
<option value="b"> Hide your heart </option> 
 
<option value="c"> Greatest Hits </option> 
 
</select> 
 
<button type="button" onclick="loadDoc()">Display</button> 
 
<br><br> 
 
<table id="demo"></table> 
 
<script> 
 
function loadDoc() { 
 
    var xhttp = new XMLHttpRequest(); 
 
    xhttp.onreadystatechange = function() { 
 
    if (this.readyState == 4 && this.status == 200) { 
 
     myFunction(this); 
 
    } 
 
    }; 
 
    xhttp.open("GET", "cd_catalog.xml", true); 
 
    xhttp.send(); 
 
} 
 
function myFunction(xml) { 
 
    var i; 
 
    var xmlDoc = xml.responseXML; 
 
    var table="<tr><th>Artist</th><th>Title</th><th>Country</th><th>Company</th><th>Price</th>Year</th></tr>"; 
 
    var x = xmlDoc.getElementsByTagName("CD"); 
 
    for (i = 0; i <x.length; i++) { 
 
    table += "<tr><td>" + 
 
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + 
 
    "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + 
 
    "</td><td>" + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + 
 
    "</td><td>" + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + 
 
    "</td><td>" + 
 
    x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue + 
 
    "</td></tr>"; 
 
    } 
 
    document.getElementById("demo").innerHTML = table; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

<CATALOG> 
 
<CD> 
 
<TITLE>Empire Burlesque</TITLE> 
 
<ARTIST>Bob Dylan</ARTIST> 
 
<COUNTRY>USA</COUNTRY> 
 
<COMPANY>Columbia</COMPANY> 
 
<PRICE>10.90</PRICE> 
 
<YEAR>1985</YEAR> 
 
</CD> 
 
<CD> 
 
<TITLE>Hide your heart</TITLE> 
 
<ARTIST>Bonnie Tyler</ARTIST> 
 
<COUNTRY>UK</COUNTRY> 
 
<COMPANY>CBS Records</COMPANY> 
 
<PRICE>9.90</PRICE> 
 
<YEAR>1988</YEAR> 
 
</CD> 
 
<CD> 
 
<TITLE>Greatest Hits</TITLE> 
 
<ARTIST>Dolly Parton</ARTIST> 
 
<COUNTRY>USA</COUNTRY> 
 
<COMPANY>RCA</COMPANY> 
 
<PRICE>9.90</PRICE> 
 
<YEAR>1982</YEAR> 
 
</CD> 
 
<CD> 
 
<TITLE>Still got the blues</TITLE> 
 
<ARTIST>Gary Moore</ARTIST> 
 
<COUNTRY>UK</COUNTRY> 
 
<COMPANY>Virgin records</COMPANY> 
 
<PRICE>10.20</PRICE> 
 
<YEAR>1990</YEAR> 
 
</CD> 
 
<CD> 
 
<TITLE>Eros</TITLE> 
 
<ARTIST>Eros Ramazzotti</ARTIST> 
 
<COUNTRY>EU</COUNTRY> 
 
<COMPANY>BMG</COMPANY> 
 
<PRICE>9.90</PRICE> 
 
<YEAR>1997</YEAR> 
 
</CD> 
 
</CATALOG>

来源

2017-01-02 MA VI

哪里是你的代码？哦，并...欢迎来到堆栈溢出。 – PHPglue

没有算法选择的选项进行比较XML值。
选择选项具有无意义的值。

查看我的plunk示例。 http://embed.plnkr.co/qcNQWXa7fmZ4ry5nRIlz/

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style> 
 
    table,th,td { 
 
    border : 1px solid black; 
 
    border-collapse: collapse; 
 
    } 
 
    th,td { 
 
    padding: 5px; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 
    <form id="form1"> 
 
    <select name="Artist" id="cd_artist"> 
 
     <option value="Artist"> Choose an Artist </option> 
 
     <option value="Bob Dylan">Bob Dylan</option> 
 
     <option value="Bonnie Tyler">Bonnie Tyler</option> 
 
     <option value="Dolly Parton">Dolly Parton</option> 
 
    </select> 
 
    <select name="Title" id="cd_title"> 
 
     <option value="-Title"> -Choose the title </option> 
 
     <option value="Empire Burlesque">Empire Burlesque</option> 
 
     <option value="Hide your heart">Hide your heart</option> 
 
     <option value="Greatest Hits">Greatest Hits</option> 
 
    </select> 
 
    </form> 
 
    <button type="button" onclick="loadDoc()">Display</button> 
 
    <br><br> 
 
    <table id="demo"></table> 
 
    
 
    <script> 
 
    function loadDoc() { 
 
     var xhttp = new XMLHttpRequest(); 
 
     xhttp.onreadystatechange = function() { 
 
     if (this.readyState == 4 && this.status == 200) { 
 
      myFunction(this); 
 
     } 
 
     }; 
 
     xhttp.open("GET", "cd_catalog.xml", true); 
 
     xhttp.send(); 
 
    } 
 
    
 
    function myFunction(xml) { 
 
     var artistObj = document.getElementById('cd_artist'); 
 
     var titleObj = document.getElementById('cd_title'); 
 
     var selectedArtist = artistObj.options[artistObj.selectedIndex].value; 
 
     var selectedTitle = titleObj.options[titleObj.selectedIndex].value; 
 
     
 
     var i; 
 
     var xmlDoc = xml.responseXML; 
 
     var tableHeader = "<tr><th>Artist</th><th>Title</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>"; 
 
     var tableBody = ""; 
 
     var x = xmlDoc.getElementsByTagName("CD"); 
 

 
     for (i = 0; i <x.length; i++) { 
 
     var xmlArtist = x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue; 
 
     var xmlTitle = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue; 
 
     var xmlCountry = x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue; 
 
     var xmlCompany = x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue; 
 
     var xmlPrice = x[i].getElementsByTagName("PRICE")[0].childNodes[0].nodeValue; 
 
     var xmlYear = x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue; 
 
     
 
     if(selectedArtist == xmlArtist && selectedTitle == xmlTitle) { 
 
      tableBody = "<tr><td>" + xmlArtist + "</td><td>" + xmlTitle + "</td><td>" + xmlCountry + 
 
        "</td><td>" + xmlCompany + "</td><td>" + xmlPrice + "</td><td>" + xmlYear + "</td></tr>"; 
 
      break;   
 
     } else { 
 
      tableBody = "<tr><td colspan='6' align='center'>Not Found</td></tr>" 
 
     } 
 
     } 
 
     document.getElementById("demo").innerHTML = tableHeader + tableBody; 
 

 
    } 
 
    
 
    </script> 
 

 
</body> 
 
</html>

来源

2017-01-03 03:24:54

非常感谢@史密斯李。我可以如何下载显示的表格作为pdf文件？ –

我可以问你一个类似这样的运动吗？ –

如何显示从列表中选择的用户？

回答

相关问题