Javascript 3 drop down menus. On change of one drop down menu set default value for other two drop down menus. Need optimization

Question

Code is very long. But from my opinion to show what is necessary I must post whole code.

Three drop down menus. Php and javascript are used. If in one of menu change value, then values in the other two menus are set to default.

Created long code that would need to be improved/optimized (javascript would be necessary to make shorter).

Posted code (without php) here http://jsfiddle.net/rigaconnect/QaUmK/5/ (for not understandable reasons posted code in jsfiddle is not fully working; On my website the code works as expected.)

At first php

$options_month = array("Select month", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
$options_quarter = array("Select quarter", "First", "Second", "Third", "Fourth");
$options_halfyear = array("Select half-year", "First", "Second");

Then drop down menus

<select id="month_id" name="monthid">
<?php
foreach ( $options_month as $i1=>$opt1 ) : 
echo '<option value="' .htmlspecialchars($i1) .'"' .((htmlspecialchars($i1) == htmlspecialchars($_POST['monthid'][$counter]))? 'selected' : "") .'>'.htmlspecialchars($opt1) .'</option>';
endforeach;
?>
</select>

<select id="quarter_id" name="quarterid">
<?php
foreach ( $options_quarter as $i1=>$opt1 ) : 
echo '<option value="' .htmlspecialchars($i1) .'"' .((htmlspecialchars($i1) == htmlspecialchars($_POST['quarterid'][$counter]))? 'selected' : "") .'>'.htmlspecialchars($opt1) .'</option>';
endforeach;
?>
</select>

<select id="halfyear_id" name="halfyearid">
<?php
foreach ( $options_halfyear as $i1=>$opt1 ) : 
echo '<option value="' .htmlspecialchars($i1) .'"' .((htmlspecialchars($i1) == htmlspecialchars($_POST['halfyear'][$counter]))? 'selected' : "") .'>'.htmlspecialchars($opt1) .'</option>';
endforeach;
?>
</select>

And then javascript that would need to improve. Code is very long. Possibly the same can do with shorter code.

var month_for_update = document.getElementById( 'month_id' );
function updateQuarterHalfyear ( e ) {

var quarter = this.options[ this.selectedIndex ].value, quarterDDL= document.getElementById( 'quarter_id' ), quarter, i = quarterDDL.options.length - 1;

var halfyear = this.options[ this.selectedIndex ].value, halfyearDDL= document.getElementById( 'halfyear_id' ), halfyear, i = halfyearDDL.options.length - 1;

quarter = 0;
halfyear = 0;

for ( ; i > -1 ; i-- ) {
if ( quarterDDL.options[i].value == quarter ) {
quarterDDL.options[i].selected = true;
break;
}
}

for ( ; i > -1 ; i-- ) {
if ( halfyearDDL.options[i].value == halfyear ) {
halfyearDDL.options[i].selected = true;
break;
}
}

}

month_for_update.onchange = updateQuarterHalfyear;

/**/
var quarter_for_update = document.getElementById( 'quarter_id' );
function updateMonthHalfyear ( e ) {

var month = this.options[ this.selectedIndex ].value, monthDDL= document.getElementById( 'month_id' ), month, i = monthDDL.options.length - 1;

var halfyear = this.options[ this.selectedIndex ].value, halfyearDDL= document.getElementById( 'halfyear_id' ), halfyear, i = halfyearDDL.options.length - 1;

month = 0;
halfyear = 0;

for ( ; i > -1 ; i-- ) {
if ( monthDDL.options[i].value == month ) {
monthDDL.options[i].selected = true;
break;
}
}

for ( ; i > -1 ; i-- ) {
if ( halfyearDDL.options[i].value == halfyear ) {
halfyearDDL.options[i].selected = true;
break;
}
}

}

quarter_for_update.onchange = updateMonthHalfyear;


/**/
var halfyear_for_update = document.getElementById( 'halfyear_id' );
function updateMonthQuarter ( e ) {

var month = this.options[ this.selectedIndex ].value, monthDDL= document.getElementById( 'month_id' ), month, i = monthDDL.options.length - 1;

var quarter = this.options[ this.selectedIndex ].value, quarterDDL= document.getElementById( 'quarter_id' ), quarter, i = quarterDDL.options.length - 1;

month = 0;
quarter = 0;

for ( ; i > -1 ; i-- ) {
if ( monthDDL.options[i].value == month ) {
monthDDL.options[i].selected = true;
break;
}
}

for ( ; i > -1 ; i-- ) {
if ( quarterDDL.options[i].value == quarter ) {
quarterDDL.options[i].selected = true;
break;
}
}

}

halfyear_for_update.onchange = updateMonthQuarter;    

Please advice how to shorten javascript. Possibly some other part of code can be improved.

Clarification. Default value is the first value ( [0] ) in $options_month , $options_quarter , $options_halfyear . When page first loads can see Select month , Select quarter , Select half-year . So page loads. User select for example February from the months drop down menu. Then user decides that instead of month need to select quarter. User select First from quarters drop down menu. Value in months drop down menu automatically changes to Select month .

Answer 1

here is my solution. Much simpler. However, I have change to html layout as well.

HTML update: (have onchange in select tag)

<select id="month_id" name="monthid" onchange="update_other_dd ( 'month_id' )">
...
<select id="quarter_id" name="quarterid" onchange="update_other_dd ( 'quarter_id' )">
...
<select id="halfyear_id" name="halfyearid" onchange="update_other_dd ( 'halfyear_id' )">
...

Javascript update: (reduced to 9 lines)

    var dd_array = ['month_id', 'quarter_id', 'halfyear_id'];
    function update_other_dd ( dd_id ) {
    for(i=0;i<dd_array.length;i++){
    if(dd_array[i] != dd_id){
        var array_to_reset = document.getElementById( dd_array[i] );
        array_to_reset.options[0].selected = 1;
    }
    }
    }