Popolare un Combobox con JQuery e XML

Posted by: Marco Nardi Posted date: November 03, 2011 In: Ajax, Jquery, XML | comment : 0

HTML

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>

<title>JQuery and XML Combobox</title>
</head>

<body onLoad="loadXML()">
<div id="holder">
<form name"myForm" method="GET" action="">
<select name="myList" onclick="go(this.form)" id="combobox">

</select>
</form>
</div>

</body>

</html>

CSS

body
{
    font-family: 'Droid Sans', 'Arial', sans-serif;
}

#holder
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width:  200px;
}

select
{
    width: 200px;
}

Javascript / JQuery

// variables declaration
var XML_PATH = "xml/config.xml";


// load XML file
function loadXML()
{
    $.ajax({
            type: "GET",
            url: XML_PATH,
            dataType: "xml",
            success: function(xml) 
            {
                $(xml).find('item').each(function(value)
                {
                    $("#combobox").append('<option value="'+$(this).attr("value")+'">'+$(this).text()+'</option>');
                });
            }
    });
}


// go to selected url
function go(form)
{
    var id = form.myList.selectedIndex;
    var result = form.myList.options[id].value;
    window.location.href = result;
}

XML

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item value="http://flepstudio.org/">Actionscript</item>
    <item value="http://www.asp.net/">ASP</item>
    <item value="http://www.cplusplus.com/">C++</item>
    <item value="http://www.adobe.com/products/coldfusion-family.html">Coldfusion</item>
    <item value="http://www.w3schools.com/css/">CSS</item>
    <item value="http://www.w3schools.com/html/">HTML</item>
    <item value="http://java.com/en/">Java</item>
    <item value="http://www.w3schools.com/js/">Javascript</item>
    <item value="http://jquery.com/">JQuery</item>
    <item value="http://www.mysql.com/">MySQL</item>
    <item value="http://www.perl.org/">Perl</item>
    <item value="http://www.php.net/">PHP</item>
    <item value="http://www.python.org/">Python</item>
    <item value="http://www.ruby-lang.org/">Ruby</item>
    <item value="http://msdn.microsoft.com/en-us/vstudio/hh388568">Visual Basic</item>
    <item value="http://www.w3schools.com/xml/">XML</item>
</items>

Sponsors of this article