Füllen Sie ein Select-Feld in HTML mit AJAX

Ich versuche, eine einfache HTML5-Seite zu erstellen, dass ein HTML5-Objekt beim Laden der Seite mit einer Liste von Werten gefüllt wird, die in einem XML gespeichert sind und mit einem externen aufgerufen werden Javascript-Datei.Füllen Sie ein Select-Feld in HTML mit AJAX

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="jquery.js" type="text/javascript"></script> 
     <script src="js/main.js" type="text/javascript" charset="utf-8"></script> 
    </head> 
    <body onLoad="javascript:loadXML()"> 
     <header> 
      <h1></h1> 
     </header> 
     <form name="myForm" method="GET" action=""> 
      <select id="cbLDAP"></select> 
     </form> 
     </div> 
    </body> 
</html>

JS:

// variables declaration 
var XML_PATH = "XML/ou.xml"; 
var select = $('#cdLDAP'); 
// load XML file 
function loadXML() 
{ 
    $.ajax({ 
      type: "GET", 
      url: XML_PATH, 
      dataType: "xml", 
      success: function(xml) 
      { 
       $(xml).find('LDAP').each(function() 
       { 
        var ou = $(this).find('OU').text(); 
        select.append("<option/><option class='ddheader'>"+ou+"</option>"); 
       }); 
       $(this).find('Name').each(function(){ 
        var name = $(this).text(); 
        select.append("<option class='ddindent' value='"+ name +"'>"+name+"</option>"); 
       }); 
      } 
    }); 
}

XML:

<?xml version= "1.0" encoding="UTF-8"?> 
<DropDown> 
    <LDAP> 
     <OU>1</OU> 
     <OU>2</OU> 
     <OU>3</OU> 
     <OU>4</OU> 
     <OU>5</OU> 
     <OU>6</OU> 
    </LDAP> 
</DropDown>

Wenn ich meine HTML-Datei in Firefox 11 laden, die Select-Objekt nicht gefüllt. Was mache ich falsch? Vielen Dank.

Quelle

2012-04-03 cquadrini

Sie hatten einen Tippfehler zwischen der ID des SELECT-Elements und dem Anführungscode von jQuery. Außerdem haben Sie den übergeordneten Knoten durchlaufen, der keine Textwerte enthielt, im Gegensatz zu den untergeordneten Knoten "OU".

Hier einige Beispiel-Code, der das XML-Parsing behebt und einige falsch benannte Element-IDs bereinigt:

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script> 
</head> 
<body> 
    <header> 
     <h1></h1> 
    </header> 
    <form name="myForm" method="GET" action=""> 
     <select id="cdLDAP"> 
     <option/> 
     </select> 
    </form> 
    </div> 
    <script type="text/javascript"> 
    // variables declaration 
    var XML_PATH = "XML/ou.xml"; 
    // load XML file 
    $(function() { 
     $.ajax({ 
     type: "GET", 
     url: XML_PATH, 
     dataType: "xml", 
     success: function(xml) { 
      $(xml).find('LDAP').find('OU').each(function(i) { 
      var ou = $(this).text(); 
      $('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>"); 
      }); 
      $(this).find('Name').each(function() { 
      var name = $(this).text(); 
      $('#cdLDAP').append("<option class='ddindent' value='"+ name +"'>"+name+"</option>"); 
      }); 
     } 
     }); 
    });  
    </script> 
</body>  
</html>

schließlich unter Hinweis auf dessen wert, dass die onLoad Aktion und in Abhängigkeit der Parsing-Code Verpackung ist nicht wirklich notwendig mit jQuery; Vergessen Sie nicht, den clientseitigen Code auf demselben Server wie die XML-Datei zu speichern. Andernfalls wird die Richtlinie für denselben Ursprung verwendet, die den AJAX-Abruf der XML-Daten blockiert.

Quelle

2012-04-03 16:40:59 bcmoney

was ist das ' – cquadrini

Füllen Sie ein Select-Feld in HTML mit AJAX

Antwort

Verwandte Themen