从下拉列表中显示XML项目

时间:2014-10-22 09:21:43

标签: jquery xml list drop-down-menu

我一直在为我的工作开发一个小工具,但不能真正完成最后的工作。

您可以在此处查看代码等:http://jsfiddle.net/wb157kbx/5/

我要做的是,我希望country中的XML进入下拉菜单,就像现在一样。当您选择country时,它会显示mobile标记中phone的{​​{1}},codeXML数据。我正在使用JQuery完成所有工作。

我做错了什么,因为我没有选择#talpricephone等等?

DEMO

1 个答案:

答案 0 :(得分:1)

$('#dropdown').change(function () {     

    $selected = $('#dropdown').find(":selected");
    var id = $selected.prop("id");  
        $(xml).find('item[id="' + id + '"]').each(function ({

            var code = $(this).find('code').text();
            var fastnet = $(this).find('phone').text();
            var mobil = $(this).find('mobile').text();

        $("#pris").text("Mobil: " + mobil + " Fastnet: " + fastnet + " Landkode: " + code);

});

问题是您过早地将值添加到全局范围ID。 这样你的id就会成为xml上的最后一个id。

您需要解决所选的选项ID

var id = $selected.prop("id");  

我会做的是:

success: function (xml) {

            // Parse the xml file and get data
            var xmlDoc = $.parseXML(xml),                
                $xml = $(xmlDoc),
                options = "";


            $(xml).find('item').each(function () {
                id = $(this).attr('id');
                land = $(this).find('country').text();
                code = $(this).find('code').text();
                fastnet = $(this).find('phone').text();
                mobil = $(this).find('mobile').text();

                options += "<option data-id='"+id +"' data-land='"+land +"' data-code='"+code +"' data-fastnet='"+fastnet +"' data-mobil='"+mobil+"' >" + land + "</option>";

            });
          $("#dropdown").html(options)

        }

然后在改变时我会这样做:

 $('#dropdown').change(function () {       
    $selected = $('#dropdown').find(":selected");
    $("#pris").text("Mobil: " +$selected.data("mobil")+
                    " Fastnet: " +$selected.data("fastnet") + 
                    " Landkode: " + $selected.data("code"));

 });