从xml文件创建一个下拉列表,没有重复的值。我需要一个阵列吗?

时间:2012-05-29 21:03:30

标签: javascript xml arrays variables drop-down-menu

我还在学习javascript和xml,最近我遇到了一个问题,我肯定很容易解决。如果可能的话,我希望能得到一些帮助。

我有一个xml文件,可以在这里找到

http://mrblesid.com/blueprint/bookinglist.xml

我目前正在使用此代码创建一个下拉列表,其中包含来自其中一个属性“strArtistName”的值

$(document).ready(function(artists){
$.ajax({
    type: "GET",
    url: "bookinglist.xml",
    dataType: "xml",
    success: function(artists_list) { 
        var select = $('#mySelect');
        $(artists_list).find('vw_ADM_BookingListNull[strArtistName]').each(function(){
            var artists = $(this).attr('strArtistName');
            select.append('<option value="'+artists+'">'+artists+'</option>');
            });
    select.children(":first").text("please make a selection").attr("selected",true);
    }
    });
});

然后通过以下

将其调用到下拉列表中
<form>
  <select id="mySelect">
  <option>loading</option>
  </select>
</form>

我想避免重复为每个条目找到的艺术家名称,我是否认为我需要使用数组呢?如果是这样我该怎么办呢?

从列表中选择的名称应填充变量以在报告中的其他位置使用。

任何帮助都会非常感激,因为我有最后期限迫在眉睫。

提前致谢, MIKEY

2 个答案:

答案 0 :(得分:0)

首先,您应该出于性能原因批量处理DOM插入(您还可以通过使用数组而不是纯字符串连接来挤出更多性能)这是您的成功函数,其中包含一些性能优化以及检查重复的艺术家:

function(artists_list) { 
    var select = $('#mySelect'),
        html = [],
        artistArray = [];

    $(artists_list).find('vw_ADM_BookingListNull[strArtistName]').each(function(){
        var artists = $(this).attr('strArtistName');

        // Check the artistArray for a duplicate.
        // This will only work in more recent browsers.
        if (artistArray.indexOf(artists) === -1) {
            html.push('<option value="'+artists+'">'+artists+'</option>');
            artistArray.push(artists);
        }
    });

    // Join the HTML array and add it to the select element
    select.append(html.join(''))
      .children(":first").text("please make a selection").attr("selected",true);
}

答案 1 :(得分:0)

数组将起作用。将主要部分更新为

var artistsArr = [];
$(artists_list).find('vw_ADM_BookingListNull[strArtistName]').each(function(){
    var artists = $(this).attr('strArtistName');
    if ($.inArray(artists, artistsArr) == -1) {
        select.append('<option value="'+artists+'">'+artists+'</option>');
        artistsArr.push(artists);
    }
});

某些浏览器不支持Array.indexOf,因此您可以使用jQuery的inArray