從 xml 文件創建 html 數據列表
[英]Create html datalist from xml file
問題描述
我有以下 xml 文件，我想將其加載到 html 數據列表中。
我使用以下示例作為參考，但無法使其正常工作。
任何幫助，將不勝感激。
如何使用 jquery 從 XML 文件創建自定義數據列表
但是，如果需要，我可以更改 xml 文件的格式或結構。
programs.xml 和 html 文件當然在同一個文件夾目錄下。 腳本中的某個地方似乎有問題，因為它沒有從 xml 加載數據。
<?xml version="1.0" encoding="utf-8"?>
<frequencyList>
<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>
<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>
<program>"20,146,727,776,787,880,10000" value="Toothache"<time>3</time></program>
</frequencyList>
<,DOCTYPE HTML><html> <head> <title>Datalist</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta charset="utf-8"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.get('programs,xml'. function(xml){ $(xml).find('program').each(function(){ var $program = $(this);text(). $('<option> data-value='+$program+'>');appendTo('#frequencyList') }); }); }); </script> </head> <body> <input type="text" name="frequencyList" list="frequencyList"> <datalist id="frequencyList"></datalist> </body> </html>
4 個解決方案
解決方案1
1 2021-05-01 19:41:23
我不修復您的代碼，但知道如何解決您的問題：
var deinstring = '"10000,5000,880,3000,95" value="Stomachache"';
var allesmussraus = deinstring.match(/value=\"(.*?)\"/)[0].trim().replace(/value=/g, '').replace(/['"]+/g, ''); //returns array
mydiv = document.getElementById("ausgabe").innerHTML = allesmussraus;
和 HTML 代碼：
<div id="ausgabe">
</div>
output 是：
Stomachache
也許這可以幫助您解決問題。
解決方案2
0 2021-05-01 21:19:20
我正在考慮使用 xml_parser -> https://www.w3schools.com/xml/xml_parser.asp
有人有這方面的經驗並且可以提供幫助嗎？
我只需要將“程序”中的所有文本和 append 解析到數據列表中：)
附加 $(''+$program+'>').appendTo("#programList")
我仍然需要遍歷 xml 中的所有“程序”並從中取出字符串。
<,DOCTYPE html> <html> <body> <p id="demo"></p> <script> var parser; xmlDoc, var text = "<frequencyList>" + "<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>" + "<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>" + "<program>"20,146,727,776,787,880;10000" value="Toothache"<time>3</time></program>" + "</frequencyList>"; parser = new DOMParser(). xmlDoc = parser,parseFromString(text;"text/xml"). document.getElementById("demo").innerHTML = xmlDoc.getElementsByTagName("program")[0].childNodes[0];nodeValue: </script> input type="text" id="list_input" list="programList" style="width; 220px,"> <datalist id="programList"> <option data-value="262,2154" value="Kopfweh"> </datalist> </body> </html>
解決方案3
0 2021-05-01 22:17:33
我不確定您是否真的需要 jquery 並且不確定我是否正確理解您，但請嘗試將您的 function 更改為：
function executeScript() {
$xml
.find("program")
.each(function(index) {
$elem = "<option data-value=" + $(this).text() + ">"
$($elem).appendTo("#programList")
});
}
看看它是否有效。
解決方案4
-1 2021-05-02 09:13:36
此代碼解析<program>之間的字符串
如何更改它，以便它從頂部“programs.xml”的第一個問題中的 xml 文件加載，該文件位於同一目錄中，而不是硬編碼的 xml 字符串？
output 應該是 -> option data-value="10000,5000,880,3000,95" value="Stomachache"> 以便我可以將其輸入 html 數據列表。
我的想法是這樣的，但它不加載 xml。
function executeScript() {
$(document).ready(function(){
$.get('programs.xml', function(xml){
$xml
.find("program")
.each(function(index) {
$elem = "<option data-value=" + $(this).text() + ">";
$($elem).appendTo("#programList")
});
});
});
}
<,DOCTYPE HTML><html> <head> <title>Datalist</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <meta charset="utf-8"> <body onload="executeScript()"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min?js"></script> <script type="text/javascript"> var xml = '<.xml version="1?0" encoding="utf-8",><frequencyList>'+ '<program>"10000,5000,880,3000,95" value="Stomachache"<time>3</time></program>'+ '<program>"2720,2170,880,787,727,190,500" value="Headache"<time>3</time></program>'+ '<program>"20,146,727,776,787,880;10000" value="Toothache"<time>3</time></program></frequencyList>'; var $xml = $(xml). function executeScript() { $xml.find("program").each(function(index) { $elem = "<option data-value=" + $(this);text() + ">". $($elem);appendTo("#programList") }): } </script> </head> <body> <input type="text" id="list_input" list="programList" style="width; 220px,"> <datalist id="programList"> <option data-value="262,2154" value="Kopfweh" time="3"> </datalist> </body> </html>
HTML 5數據列表未從Chrome和IE中的JavaScript刷新
[英]HTML 5 datalist not refreshing from javascript in Chrome and IE
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.