help with chained selects and existing form values, ex: adding <option selected="selected"></option>

I have a 3 step chained-select sequence, game -> battle -> winning side , which pulls all data from a MySQL database.

After some wandering on the internet, I found a compact jQuery script that performs wonderfully. However, I am at a loss as to how to allow for existing data: <option selected="selected"></option> using this script.

chained select javascript:

<script>
var ajax = new Array();

function getScenNumList(sel)
{
    var game = sel.options[sel.selectedIndex].value;
    document.getElementById('scenarioNumber').options.length = 0;   // Empty scenario number select box
    if(game.length>0){
        var index = ajax.length;
        ajax[index] = new sack();

        ajax[index].requestFile = 'js/getPlayData.php?gameName='+game;  // Specifying which file to get
        ajax[index].onCompletion = function(){ createScenarioNumbers(index) };  // Specify function that will be executed after file has been found
        ajax[index].runAJAX();      // Execute AJAX function
    }
}

function createScenarioNumbers(index)
{
    var obj = document.getElementById('scenarioNumber');
    eval(ajax[index].response); // Executing the response from Aja开发者_Go百科x as Javascript code
}

function getNations(sel)
{
    var scenNum = sel.options[sel.selectedIndex].value;
    document.getElementById('victor').options.length = 0;   // Empty nation select box
    if(scenNum.length>0){
        var index = ajax.length;
        ajax[index] = new sack();

        ajax[index].requestFile = 'js/getPlayData.php?scenID='+scenNum; // Specifying which file to get
        ajax[index].onCompletion = function(){ createNations(index) };  // Specify function that will be executed after file has been found
        ajax[index].runAJAX();      // Execute AJAX function
    }
}

function createNations(index)
{
    var obj = document.getElementById('victor');
    eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}

</script>

excerpt from the PHP database retrieval script (getPlayData.php):

$gameName = mysql_real_escape_string($_GET['gameName']);

$q = "SELECT a, b, c FROM table WHERE game='$gameName' ORDER BY num ASC";

$r = mysql_query($q);

echo "obj.options[obj.options.length] = new Option('#','');\n";

while ($row = mysql_fetch_row($r)) {

    $string = mysql_real_escape_string(($row[0].' - '.$row[1])); // needed so quotes ' " don't break the javascript

    echo "obj.options[obj.options.length] = new Option('$string','$row[2]');\n";

}

echoing the obj.options is the stock method this script was using. It seems ugly to me, but I don't know any javascript so I didn't want to fiddle with it.

The HTML is simple enough, just a table with a few empty <select> objects with IDs matching those in the javascript and onchange="getXXX(this)" calls.

My question is this: Everything works great for new records, but I'm at a loss as to how I can alter this to support marking one option from each select as selected, assuming I have that data in hand (ex: a user is editing an existing record) ?

Many thanks!

You can see this tutorial for creating an option that is selected as default. http://www.javascriptkit.com/javatutors/selectcontent.shtml One parameter in the option constructor dictate that whether the option is selected or not.
In the PHP file you will edit as follow:

$gameName = mysql_real_escape_string($_GET['gameName']);

$q = "SELECT a, b, c FROM table WHERE game='$gameName' ORDER BY num ASC";

$r = mysql_query($q);

echo "obj.options[obj.options.length] = new Option('#','');\n";

while ($row = mysql_fetch_row($r)) {

    $string = mysql_real_escape_string(($row[0].' - '.$row[1])); // needed so quotes ' " don't break the javascript
    if ($string ......)
    echo "obj.options[obj.options.length] = new Option('$string','$row[2]', false, true);\n";
    else
     ......

}