Fetch mysql data into javascript array

Question

I tried to fetch mysql data stored in javascript array, I want it to be auto populate into textarea by selected options, but it doesn't work, the textarea box not display any content, is there any workaround?

<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
<?php
$qry1 = mysql_query("SELECT * FROM `template`") or die(mysql_error());
while($rows = mysql_fetch_array($qry1)){
?>
    myData[<?php echo $rows['preset_id'] ?>] = "<?php echo $rows['contents'] ?>";
<?php
}
?>
//myData[1] = 'Some text'; <- this working
//myData[2] = 'Some other text';  <- this working
</script>

here is code insert into textarea:

<form id="example" name="example">
<select id="selector" name="selector">
    <option value="" selected></option>
    <?php
    $qry = mysql_query("SELECT * FROM `preset`") or die(mysql_error());
    while($rows = mysql_fetch_array($qry)){
        echo '<option value="'.$rows['preset_id'].'">'.$rows['preset_subj'].'</option>';
    }
    ?>
</select>
<br />
<textarea id="populateme" name="populateme" />
</textarea>
</form>

<script type="text/javascript">
document.example.selector.onchange = updateText;

function updateText() {
    var obj_sel = document.example.selector;
    document.example.populateme.value = myData[obj_sel.value];
}
</script>