Changing a dropdown menu's value AND display name to SQL query results based on a radio button selection

Important note: Most of the things I want from this are finished & functional -- the only part that doesn't work is getting a "value=" that is different from the name of the select option of the dropdown. That said I'm going to lay this whole thing out for the benefit of anyone who might want to use something similar.

---

Goal: When the user clicks a radio button, a dropdown menu elsewhere on the page is modified to show different values, which are drawn from an SQL query.

Specifically in this example, a user would pick an academic program (say, a Ph.D.) and the dropdown shows which start dates are available.

Here is an SQL query which gets the available start dates, and formats them for the Javascript:

$app_period_lookup_psyd =  mssql_query("select app_period_id,
app_period_display_online from  dbo.v_app001_application_period_for_dropdown 
where pgm_id = 1 order by available_dt");
$app_period_options_psyd = "";
while($result = mssql_fetch_array($app_period_lookup_psyd)) {
$app_period_options_psyd .= "'" . $result['app_period_display_online'] ."', ";
}  

The variable created here is $app_period_options_psyd, and it would spit out something like: 'September 2011', 'January 2012',

These are the radio buttons:

<input type="radio" name="pgm_id" id="macpe" value="4"
onclick="change([<?=$app_period_options_psyd?>]) " />Radio Button 1<br />

<input type="radio" name="pgm_id" id="macpd" value="5"
onclick="change(['January', 'February', 'March']) " />Radio Button 2

Clicking these two buttons would generate the following dropdowns:

<select id="app_period_id">
<option value="September 2011">September 2011</option>
<option value="January 2012">January 2012</option>
</select>

<select id="app_period_id">
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
</select>

They work via this script in the header:

<script type="text/javascript">
    function change(arr) {
    var el = document.getElementById('app_period_id');
    el.options.length = 0;
    for(var i = 0; i< arr.length; i++ ) {
    el.options[el.options.length] = new Option( arr[i], arr[i]);
    }
    }
</script>

THE QUESTION: How do I modify the Javascript to create different values for value="" and the descriptor, with BOTH values coming from the query/queries? This is the ideal output:

<select id="app_period_id">
<option value="app_period_1">January 2012</option>
<option value="app_period_6">February 2012</option>
<option value="app period_18">March 2013</option>
</select>

Where "app_p开发者_运维技巧eriod_x" would be generated in the SQL query.

---

Try the following changes:

$app_period_options_psyd .= "'" . $result['app_period_display_online'] ."', ";

becomes

$app_period_options_psyd .= "'" . $results['app_period_id'] . "'," . $result['app_period_display_online'] ."', ";

This means your array now looks like

arr_[0] = Id arr_[1] = Name associated etc.

Now change the Javascript function to

<script type="text/javascript">
    function change(arr) {
    var el = document.getElementById('app_period_id');
    el.options.length = 0;
    for(var i = 0; i< arr.length; i+=2 ) {
    el.options[el.options.length] = new Option( arr[i], arr[i+1]);
    }
    }
</script>

You are now looping through the array two steps, and putting out both elements into your code.