[jQuery] newbie: Using JQuery to populate dropdown using ajax and xml

[GiJeet]

Hi, I have a simple html select control that I wish to repopulate with
xml file using jquery.  I can do it with native javascript but don’t
know how to do it with jquery.

Scenario: I have a dropdown on a page containing a list of colors.  I
have a button on the page that, when you click the button it uses ajax
to go to the server and get an xml file of different colors and
repopulate the dropdown with the new colors from the xml file we just
pulled from the server.  As I said, I can do this with regular
javascript but I’m trying to learn JQuery.  If anyone can show me how
to do the same with JQuery I’d be most appreciative.  Thanks.

Below is my simple ajax and javascript code.

//The xml file of colors:
<options>
        <option>Black</option>
        <option>Yellow</option>
        <option>Orange</option>
</options>

//the ajax code that runs with the button is clicked:
function GetXMLFile(sXMLFile){
    var XMLFile = "XML/" + sXMLFile + ".xml"
    oRequest.open('GET', XMLFile, true);
    oRequest.onreadystatechange = function()
    {
        if (oRequest.readyState == 4 && oRequest.status == 200) {
            var xmlDocument = oRequest.responseXML;
            var xmlOptions =
xmlDocument.getElementsByTagName("option");
            listoptions(xmlOptions); //repopulate the listbox
(dropdown) with new color values
        }
    }
    oRequest.send(null);
}

function jqueryListOptions (xmlOptions){
    $('Select1').loadSelect(xmlOptions);
}

//this is what I’d like to replace with JQuery!
function listoptions (xmlOptions){
    var selectControl = document.getElementById('Select1');
    for (var loopIndex = 0; loopIndex < xmlOptions.length; loopIndex+
+ )
    {
        var sColor = '';
        if(xmlOptions[loopIndex].firstChild.nodeType == 3){ //3 = text
node
            sColor = xmlOptions[loopIndex].firstChild.data;
        }
        selectControl.options[loopIndex] = new Option(sColor);
        selectControl.options[loopIndex].setAttribute("value",sColor);
    }
    var sFirstColor = selectControl.options[0].getAttribute("value");
    ColorText(sFirstColor);
}

//this just sets the color of some text to the color of the first
color in the dropdown
function ColorText(sColor){
    document.getElementById("ColorTxt").style.color = sColor;
}