将HTML选择框附加到使用MYSQL查询结果填充的页面

Question

Normally when creating dynamically populated drop-downs I'd use a simple foreach loop as below to get the data:

<select name="region" id="region" tabindex="1">
   <option value="">Select a Course</option>
   <?php foreach ( $courses as $course ) : ?>
   <option value="<?php echo $course->coursename; ?>"><?php echo $course->coursename; ?></option>
   <?php endforeach; ?>
</select>

*where $courses = select("SELECT * FROM courses"); 

etc etc

What I'm not sure is possible is to use this in anything like its current form inside a javascript function such as the one below that I've been using on some forms to append additional input fields per the requirements of the user. This works fine for a text input, for example (and as below I can use it if I type out each input option manually) but I'm not at all sure as to the best way to recreate the PHP/mySQL example above where javascript doesn't get in the way. I've tried to look into whether this could easily be done with AJAX but have not been able to find any examples of what I'm trying to do.

<script type="text/javascript">
var count = 0;
$(function(){
    $('p#add_field').click(function(){
        count += 1;
        $('#container').append(
                '<h4>Link #' + count + '</h4>&nbsp' 
                +'<select id="field_' + count + '" name="fields[]">' + '<option>Select a Course</option>'+'</select>');

    });
});
</script>

Many thanks for any advice about the best way to do this.

Answer 1

Update - I eventually managed to answer my own question - solution as per the code below.

<script type="text/javascript">
var count = 0;
$(function(){
    $('p#add_field').click(function(){
        count += 1;
        $('#container2').append(
                '<strong>Golf Course ' + count + '</strong>&nbsp&nbsp&nbsp' 
                +'<select id="field_' + count + '" name="fields[]">' + "<?php foreach ( $courses as $course ) { $name = $course->coursename; ?>"+"<?php echo '<option value=\''.htmlspecialchars($name).'\'>'.$name.'</option>'; ?>"+"<?php } ?>"+'</select><br />')

    });
});
</script>