使用xml数据动态创建下拉列表无法正常工作？

Question

我的要求是从后台我收到的xml数据创建bootstrap下拉列表，但我无法选择列表中的任何特定元素，请帮我修复此问题。

Html内容

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu"> 
<span id="demo"></span>
</ul>
</div>

JS内容

var abc = "<getexternalworkloads>Cinebench,3DMark11,Furmark,Others<getexternalworkloads>"
if (abc != "") {
abc = abc.replace(new RegExp("<getexternalworkloads>", "g"), "");
abc = abc.split(",");
array  = [];
array = array.concat(abc);

var text = "";
var i;
for (i = 0; i < array.length; i++) {
    text += array[i] + "<br>";
    afg = '<li  ><a href="#">'+text+'</a></li>'
}
document.getElementById("demo").innerHTML = afg;

输出我

Answer 1

首先，您现有的代码充满了错误。但是，不要纠正所有问题，让我们先使用 JQuery 。由于您使用 Bootstrap ，因此没有任何危害。

＆＃13;

＆＃13;

$(document).ready(function(){
var abc = "<getexternalworkloads>Cinebench,3DMark11,Furmark,Others<getexternalworkloads>"
if (abc != "") {
	abc = abc.replace("<getexternalworkloads>", "").split(",")
		.forEach( function(el, index) {
			$("#demo").append('<a class="dropdown-item" href="#">'+el+'</a>');
	});
}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
			<span class="caret"></span></button>
			<ul id="demo" class="dropdown-menu"> 
			</ul>
		</div>

＆＃13;

＆＃13;

＆＃13;

  

PS：在Bootstrap中，课程很重要，这意味着你不会   neceserallly必须使用<ul或<li>标签来获得你需要的东西。

     

此外，在您的代码中，您似乎过度使用变量。尝试   避免这样做。