Javascript 3下拉菜單。在更改一個下拉菜單時，爲其他兩個下拉菜單設置默認值。需要優化

Question

代碼很長。但從我的觀點來看，我必須發佈完整的代碼。

三個下拉菜單。使用PHP和JavaScript。如果在其中一個菜單更改值中，則其他兩個菜單中的值將被設置爲默認值。

創建需要改進/優化的長代碼（JavaScript需要縮短）。

發佈代碼（不PHP）這裏http://jsfiddle.net/rigaconnect/QaUmK/5/（不理解的原因張貼的jsfiddle代碼是不完全的工作。在我的網站代碼工作如預期）

在第一個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"); 

然後下拉菜單

<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> 

然後JavaScript，需要改進。代碼很長。可能與更短的代碼相同。

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;  

請指導如何縮短javascript。可能還有其他一部分代碼可以改進。

澄清。默認值是$options_month,$options_quarter,$options_halfyear中的第一個值（[0]）。當頁面第一次加載時，可以看到Select month，Select quarter,Select half-year。所以頁面加載。用戶從月份下拉菜單中選擇例如February。然後用戶決定，而不是月需要選擇季度。用戶從宿舍下拉菜單中選擇First。月下拉菜單中的值自動更改爲Select month。

Answer 1

這是我的解決方案。簡單得多。不過，我也改爲使用html佈局。

HTML更新：（已在選擇標籤的onchange）

<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更新：（降低到9線）

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; 
    } 
    } 
    }