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; }