Home/ Questions/Q 7576805
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T17:00:42+00:00

Having issues with dynamically creating <select> tags and then populating them with XML values.

  • 0

Having issues with dynamically creating <select> tags and then populating them with XML values.

The jQuery appends a <div> with a select and then adds <option> tags from XML data.

My first XML / AJAX attempt. Done some extensive reading but keep coming up short.

Here’s an example of my code:

<html>
  <head>
    <script src="jquery.js" type="text/javascript"></script>
    <script>
      function addSelect() {
        $("#myDiv").append(function(){
          $.ajax({
            type: "GET",
            url: "test.xml"
            dataType: "xml",
            success: function(xml) {
              $("#myDiv").append("<select id='mySelect'>");
              $(this).find('value').each(function(){
                var value = $(this).text();
                $("#mySelect".append("<option class='ddindent' value='" + value + "'>" + value + "</option>");
              });
              $("#myDiv").append("</select>");
            }
          });
        });
      }  
    </script>
  </head>
  <body>
    <div id="myDiv"></div>
    <a href="#" onClick="addSelect();">Add Select</a>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    With your code, you’re not reading the data from xml. Change $(this) to $(xml):

    $(xml).find('value').each(function(){
    var value = $(this).text();
    $("#mySelect").append("<option class='ddindent' value='" + value + "'>" + value + "</option>");
 });

    Edit: Also changed mySelect to #mySelect as MMM pointed out, and fixed a syntax error (you hadn’t closed the bracket around mySelect.

    Edit: You have a few other oddities in your code. I have fixed them below:

    function addSelect() {
  $.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: function(xml) {
      $("#myDiv").append("<select id='mySelect'>");
      $(xml).find('value').each(function(){
        var value = $(this).text();
        $("#mySelect").append("<option class='ddindent' value='" + value + "'>" + value + "</option>");
      });
      $("#myDiv").append("</select>");
    }
  });
}
    • 0