Question

我有一个包含公司业务名称的xml文档。这是树。如果选择的选项等于商家名称，找到xml商业名称节点并获得那些兄弟姐妹：姓名，电话邮件。我有一些jquery可以提取数据。我知道我的代码不完整，我只是陷入困境并试图找出下一步。不确定我是否需要添加属性或重做我的xml树。现在有点卡住了。我知道我的jquery可以使用更多的东西

________ XML _________

<?xml version="1.0" encoding="UTF-8"?>

  <corporation>
     <business>
        <business-name>cvs</business-name>
        <manager>
           <name>Dorthorty</name>
           <phone>(999) 999-7777</phone>
           <email>dor@yahoo.com</email>
        </manager>
     </business>
     <business>
        <business-name>walgreens</business-name>
        <manager>
           <name>Jon Snow</name>
           <phone>(299) 999-8888</phone>
           <email>jon@gmail.com</email>
        </manager>
     </business>
     <business>
        <business-name>rite-aid</business-name>
        <manager>
           <name>Cindy</name>
           <phone>(777) 966-9999</phone>
           <email>cindy@gmail.com</email>
        </manager>
     </business>
  </corporation>

_________ HTML ___________

<!DOCTYPE html>
<html>
  <head>
   <title> Corps Names</title>
 </head>
 <body>
   <select id="corps">
     <option value="">-- select one --</option>
     <option value="walgreens" class="letter">walgreens</option>
     <option value="cvs" class="letter">cvs/option>
     <option value="rite-aid" class="letter">rite-aid</option>
   </select>
   <div id="corpsresults">
        <p><span id="name">result</span><br />
            <span id="email">result</span><br />
            <span id="phone">result</span><br />
        </p>
   </div>
  </body>
</html>

______的Jquery ________

$(document).ready(function(){
    $( "select" ).change(function () {
     $.fn.retrieveXml = function(data){
        $(data).find('business').each(function(){
            var corpName = $(this).find('business-name').text();

            // Setup Variables
            var corpData = {
                name: ($('name', data).text()),
                phone: ($('phone', data).text()),
                email: ($('email', data).text()),
                businessname:($('business-name', data).text())
            }
            var webOption = $('select#corps option:selected').val(); 
            var businessName = $('business-name', data).text();

            if (webOption == corpName){
                alert("Hello! I am an alert box!!");
                $(data).find('business').each(function(){              
                    var corpName = $(this).find('business-name').text();           
                    $("#name").html(corpData.name);
                });
            }
            else{
                alert("Nope!");
      }
        });
    };

    // Pull data from XML
    $.ajax({
            url: '/business.xml',
            cache: false,
            type: 'GET',
            dataType: 'xml',
            async: false,
            success:function (data) {
                     $.fn.retrieveXml(data);
                    }
    });

  });

});

Answer 1

使用此Plunker：

<强> HTML：

<select id="corps">
     <option value="">-- select one --</option>
     <option value="walgreens" class="letter">walgreens</option>
     <option value="cvs" class="letter">cvs</option>
     <option value="rite-aid" class="letter">rite-aid</option>
   </select>
   <div id="corpsresults">
        <p><span id="name">result</span><br />
            <span id="phone">result</span><br />
            <span id="email">result</span><br />
        </p>
   </div>

<强> JS：

$(document).ready(function(){

        $("select").change(function () {
            $.ajax({
            url: 'main.xml',
            type: 'GET',
            dataType: 'xml',
            async: false,
            success:function (data) {
                     retrieveXml(data);
                    },
            error:function(e){alert(JSON.stringify(e));}
    });
        });

    });
    var retrieveXml = function(data){

        $(data).find('business').each(function(){
            var corpName = $(this).find('business-name').text();

            // Setup Variables
            var corpData = {
                name: ($('name', data).text()),
                phone: ($('phone', data).text()),
                email: ($('email', data).text()),
                businessname:($('business-name', data).text())
            };



            var webOption = $('select#corps option:selected').val(); 
            var businessName = $('business-name', data).text();


                $(data).find('business').each(function(index,item){ 

                    var corpName = $(this).find('business-name').text();
                    if (webOption == corpName){
                    $("#name").html($(this).find('manager > name').text());
                    $("#phone").html($(this).find('manager > phone').text());
                    $("#email").html($(this).find('manager > email').text());
                    }
                });
        });
    };

<强> XML：

<?xml version="1.0" encoding="UTF-8"?>

  <corporation>
     <business>
        <business-name>cvs</business-name>
        <manager>
           <name>Dorthorty</name>
           <phone>(999) 999-7777</phone>
           <email>dor@yahoo.com</email>
        </manager>
     </business>
     <business>
        <business-name>walgreens</business-name>
        <manager>
           <name>Jon Snow</name>
           <phone>(299) 999-8888</phone>
           <email>jon@gmail.com</email>
        </manager>
     </business>
     <business>
        <business-name>rite-aid</business-name>
        <manager>
           <name>Cindy</name>
           <phone>(777) 966-9999</phone>
           <email>cindy@gmail.com</email>
        </manager>
     </business>
  </corporation>

Xml使用jquery从选中的

1 个答案: