XML 到数组到下拉列表（jsfiddle 示例）

Question

感谢您对此进行调查，我认为这将是一个简单的答案，但我自己无法弄清楚。

我正在尝试从远程 XML 文档向 select 用户创建一个下拉菜单，该文档包含以下许多 XML 片段 (citrowske.com/xml.xml)

<User>
   <Id>111111111111</Id>
   <UserName>testuser1@example.com</UserName>
   <FirstName>Test</FirstName>
   <LastName>User1</LastName>
   <Active>true</Active>
   <Email>testuser1@example.com</Email>
   <AccessLevel>Learner</AccessLevel>
</User>

这是可行的，但在我select用户之后，我不确定如何提取他的其他相关信息以供使用。我认为最好有一个包含每个项目 ID[ ]、UserName[ ] 等的数组，但不知道该怎么做，许多搜索都没有产生相关结果。

下面是我目前必须提取 XML 并搜索名字和姓氏的代码。

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://citrowske.com/xml.xml',
    function (xml) {
        //console.log("> ", xml);
        //$("#viewer").html(xml);
        
////////////////////////////////////
var select = $('#yourdropdownbox');
  select.append('<option value="">Select a User</option>');    
  $(xml).find('User').each(function(){           
  var FirstNames = $(this).find('FirstName').text();
   var LastNames = $(this).find('LastName').text();
    
  select.append("<option value='"+ FirstNames +"'>"+FirstNames+" "+LastNames+"</option>");
   });
 }
////////////////////////////////////

);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<select id="yourdropdownbox">

</select>

连同目前工作代码的 jsfiddle https://jsfiddle.net/65n79t6d/

Answer 1

完全公开，我从来没有在 Whosebug 上发布问题并让别人回答，我的问题是不是不清楚？我如何获得答案？我花了 2.5 周的时间研究才弄明白这一点，但终于得到了 PTL。

无论如何，答案是为您要从用户那里提取的每条信息创建一个数组，然后将其存储在一个可以引用的数字 (i) 下。
示例：

id[1] //will pull the id for the first user
username[1]// will pull the username for the first user
lastname[1]// will pull the last name for the first user

请记住，由于下面的语句，它将为 它找到的每个用户 完成括号内的所有语句

$(xml).find('User').each(function(){

现在您正在中搜索，使用

提取您需要的所有相关信息部分

array[i] = $(this).find('InfoName').text();

然后在搜索下一个节点之前，递增 i 变量，这样它就不会覆盖您刚刚将数据保存到的数组变量。

下面是对我有用的片段，它会在值更改时显示信息。如果您不想在 HTML 中使用 java，则可以使用事件监听器。

var id = ["0"];// define all those arrays, you could also use an obj
var username = ["0"];
var lastname = ["0"];
var firstname = ["0"];
var email = ["0"];
var active = ["0"];
var accesslevel = ["0"];
var i = 0;

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://citrowske.com/xml.xml',
    function (xml) {
        //console.log("> ", xml);
        //$("#viewer").html(xml);
        
////////////////////////////////////
var select = $('#yourdropdownbox');
 select.append('<option value="">Select a User</option>');    
 $(xml).find('User').each(function(){ 
                    id[i] = $(this).find('Id').text(); // get id in each <User></User> and put it in the array id[i#]
                    username[i] = $(this).find('UserName').text();// "" for UserName
                    firstname[i] = $(this).find('FirstName').text();// "" for FirstName
                    lastname[i] = $(this).find('LastName').text();// "" for LastName
                    active[i] = $(this).find('Active').text();// "" for Active
                    email[i] = $(this).find('Email').text();// "" for Email
                    accesslevel[i] = $(this).find('AccessLevel').text();// "" for AccessLevel
    
  select.append("<option value='"+ i +"'>"+firstname[i]+" "+lastname[i]+"</option>");// The shown text is the First & Last name while the value is the i number associated with their information
   i++;// increment the i value 
    }); // end of the user, now on to the next user
 }
////////////////////////////////////

);

function info(){
 var num =  document.getElementById('yourdropdownbox').value;
  alert("Name: "+firstname[num]+" "+lastname[num]+"\nUsername: "+username[num]+"\nID: "+id[num]+"\nEmail: "+email[num]+"\nActive: "+active[num]+"\nAccess Level: "+accesslevel[num]);
};

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<select id="yourdropdownbox" onchange="info()">

</select>

XML 到数组到下拉列表（jsfiddle 示例）

XML to Array to dropdown (jsfiddle example)

xml

arrays

ajax

dropdown