如何顯示從列表中選擇的用戶？

當用戶選擇一個藝術家和標題後，點擊'顯示'按鈕時，我想顯示一張包含該藝術家和標題的所有信息（標題，藝術家，國家，公司，年份，價格）的表格。但我的代碼只是運行第一個選項。我該如何解決它？如何顯示從列表中選擇的用戶？

<!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文件？ –

我可以問你一個類似這樣的運動嗎？ –

如何顯示從列表中選擇的用戶？

回答

相關問題