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>
Member Avatar

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.

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>