Populate Dropdown - Jquery dropdown-List call function not working

[robert.wynter]

I'm using Salesforce Ampscript code with jQuery to access a table in a DB to populate. which wasn't working. I've stripped out the Ampscript code to just have a simple jQuery function and funtion call with a static table and I can see that my problem is that my jQuery syntac is wrong.
I striped it down to just the select tags, the function and a static function call. If I can get this working then I can re insert the ampscript variables

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script>

 var fillDataList = function( options )
 {
      var items = ''
        $.each( options, function ( index, option ) {
            items += '<option value="' + option + '">'
            items += option
            items += '</option>'     })
            return items
  }

</script>
<table> <tr><th>Test 4</th></tr>
    <tr>
    <td>
      <script>
      var obj = { one: 'hey 1', two: 'hey 2', three: 'hey 3', four: 'hey 4', five: 'hey 5'};
  $('#test').append(fillDataList(obj));
     </script> 

      </td>

  </tr>
  <tr>
    <td>  <select id="test">

         </select> </td>

  </tr>
</table>

[diafol]

Place your last script just before the close body tag:

<script>
var obj = { one: 'hey 1', two: 'hey 2', three: 'hey 3', four: 'hey 4', five: 'hey 5'};
$('#test').append(fillDataList(obj));
</script>
</body>

The script couldn't fill the test id tag as it didn't exist yet (page not loaded that when script asked to run). Alternatively you could do a document.ready instead, but the above works for me.

[vsmash]

Your DOM is incomplete. As diafol said, but put all your script before end of the body tag.
Also, probably better to append DOM with objects rather than strings.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<table> <tr><th>Test 4</th></tr>
    <tr>
    <td>
        Test 4
    </td>
  </tr>
  <tr>
    <td>  <select id="test">
         </select> </td>
  </tr>
</table>
<script>
 var fillDataList = function( options, append )
 {
      var selectlist = document.getElementById('test');
      // empty the list?
      if(typeOf append=='undefined'){
        // append was not set, so clear the list
        selectlist.length=0;
      }else if(append!=true){
        selectlist.length =0;
      }

        $.each( options, function ( index, option ) {
          var thisoption = document.createElement('OPTION');
          thisoption.value=index;
          thisoption.innerHTML = option;
          selectlist.append(thisoption);
            });
      }
  }
  var obj = { one: 'hey 1', two: 'hey 2', three: 'hey 3', four: 'hey 4', five: 'hey 5'};
  $(document).ready(function(){
    fillDataList(obj);
  });

</script>
</body>