从 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.