XML \ Jquery根据用户选择创建列表

时间：2012-08-28 21:13:39

标签： jquery html xml ajax

好吧，我需要尝试和完成的是拥有一个静态网页，它将显示从XML文档中提取的信息，并将其呈现在屏幕上而不刷新。我想是基本的AJAX东西。

诀窍在于，正如我试图通过思考这样，我会在精神上继续陷入“逻辑”障碍。

目的：

- 有一个显示棒球队名称，胜利，失败，关系的图表。在我的XML文档中，存在“待处理”状态，因此不应显示未完成的游戏。（需要帮助）

- 有一个选择列表，允许您选择从XML文档填充的团队。 （完成）

- 从上述选择列表中选择特定团队后，该页面应在单独区域中显示该团队的所有计划游戏。包括待定。基本上所有与该团队相关的游戏和日期（包含在XML文件中）。 （需要帮助）

到目前为止我所拥有的：

HTML \ JS 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="batty.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little Batty League</title>
<script type="text/javascript" src="library.js"></script>
<script type="text/javascript" src="jquery.js"></script>

<script  type="text/javascript">
   var IE = window.ActiveXObject ? true: false;
   var MOZ = document.implementation.createDocument ? true: false;


   $(document).ready(function(){
            $.ajax({
            type: "GET",
            url: "schedule.xml",
            dataType: "xml",
            success: function(xml) {
            var select = $('#mySelect');
            $(xml).find('Teams').each(function(){
            var title = $(this).find('Team').text();
        select.append("<option/><option class='ddheader'>"+title+"</option>");
                    });
                    select.children(":first").text("please make a selection").attr("selected",true);
                }
            });
        });
     </script>
   </script>
</head>
<body onLoad="init()">
    <!-- container start -->
<div id="container">

        <!-- banner start -->
        <div id="banner">
            <img src="images/mascot.jpg" width="324" height="112" alt="Mascot" />

           <!-- buttons start --> 
            <table width="900" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td><div class="menuButton"><a href="index.html">Home</a></div></td>
                <td><div class="menuButton"><a href="schedule.html">Schedule</a></div></td>
                <td><div class="menuButton"><a href="contact.html">Contact</a></div></td>
                <td><div class="menuButton"><a href="about.html">About</a></div></td>
              </tr>
            </table>
           <!-- buttons end -->

        </div>
        <!-- banner end -->

        <!-- content start -->
        <div id="content">
            <br />
            <form>
                <select id="mySelect">
                    <option>please make a selection</option>
                </select>
            </form>
        </div>
        <!-- content end -->

        <!-- footer start -->
        <div id="footer">
            &copy; 2012 Batty League
        </div>
        <!-- footer end -->

    </div>
    <!-- container end -->
</body>
</html>

XML是：

<?xml version="1.0" encoding="utf-8"?>
    <Schedule season="1">
        <Teams>
            <Team>Bluejays</Team>
        </Teams>

        <Teams>
            <Team>Chickens</Team>
        </Teams>

        <Teams>
            <Team>Lions</Team>
        </Teams>

        <Teams>
            <Team>Pixies</Team>
        </Teams>

        <Teams>
            <Team>Zombies</Team>
        </Teams>

        <Teams>
            <Team>Wombats</Team>
        </Teams>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-10T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays </Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-01-11T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-18T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-19T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-01-21T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-01-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-27T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Bluejays</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Bluejays</Away_Team>
            <Date>2012-01-30T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-01-31T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-10T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-12T09:00:00</Date>
        </Game>

                <Game status="Played"> 
            <Home_Team>Pixies </Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-14T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-15T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-16T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Lions</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-01-23T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Lions</Away_Team>
            <Date>2012-02-24T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-25T09:00:00</Date>
        </Game>

        <Game status="Pending"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-26T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Pixies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-27T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Pixies</Away_Team>
            <Date>2012-02-28T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Zombies</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-04T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Zombies</Away_Team>
            <Date>2012-02-05T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Wombats</Home_Team>
            <Away_Team>Chickens</Away_Team>
            <Date>2012-02-07T09:00:00</Date>
        </Game>

        <Game status="Played"> 
            <Home_Team>Chickens</Home_Team>
            <Away_Team>Wombats</Away_Team>
            <Date>2012-02-08T09:00:00</Date>
        </Game>
    </Schedule>

编辑：更简洁：

如何使用JS从XML文件中提取信息并将其以图表格式显示在页面上？

我如何为选择列表编写if语句，一旦选择了一个特定的团队，它将填充一个不同的框（不是上面段落中的相同框），其中包含有关该团队的信息？

1 个答案:

答案 0 :(得分：1)

你应该继续使用jQuery选择器：

例如：选择所有具有某个团队的游戏

var teamName = "Bluejays";
$(xml).find('Game > Home_Team:contains(' + teamName + '), Game > Away_Team:contains(' + teamName + )').each(function(){
  var date = $(this).siblings('Date').text();
  var status = $(this).parent().attr('status');
  });

有很多方法可以遍历你的xml，做你喜欢的事，

响应xml解析问题：

  $.ajax({
    type: "GET",
    url: "../xml/sdf.xml",
    dataType: ($.browser.msie) ? "text" : "xml",
    success: parseXml
  });
  function  parseXml(xml)
    {
          if ($.browser.msie) {
            var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(xml);
            xml = xmlDoc;
          } ...
相关问题
最新问题