Javascript 3 드롭 다운 메뉴. 드롭 다운 메뉴 하나를 변경하면 다른 두 드롭 다운 메뉴의 기본값이 설정됩니다. 최적화가 필요함

Question

코드가 매우 깁니다. 하지만 필자가 필요로하는 것을 보여주기 위해 전체 코드를 게시해야합니다.

3 개의 드롭 다운 메뉴. PHP와 자바 스크립트가 사용됩니다. 메뉴 변경 값 중 하나에 있으면 다른 두 메뉴의 값이 기본값으로 설정됩니다.

개선되거나 최적화되어야하는 긴 코드가 작성되었습니다 (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> 

그리고 나서 개선해야 할 자바 스크립트. 코드가 너무 깁니다. 같은 코드를 사용하면 가능할 수 있습니다.

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;  

자바 스크립트를 단축하는 방법을 알려주세요. 코드의 다른 일부분을 개선 할 수 있습니다.

명확화. 기본값은 $options_month, $options_quarter, $options_halfyear의 첫 번째 값 ([0])입니다. 페이지를 처음로드 할 때 Select month, Select quarter, Select half-year을 볼 수 있습니다. 그래서 페이지가로드됩니다. 예를 들어 월 드롭 다운 메뉴에서 February을 선택합니다. 그런 다음 사용자는 월 대신 월을 선택해야한다고 결정합니다. 사용자는 분기 드롭 다운 메뉴에서 First을 선택하십시오. 월 드롭 다운 메뉴의 값은 Select month으로 자동 변경됩니다.

Answer 1

여기 내 해결책입니다. 훨씬 더 간단합니다. 그러나, 나는 html 레이아웃으로 변경했다.

HTML 업데이트 : (select 태그에서 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')"> 
... 

자바 스크립트 업데이트 (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; 
    } 
    } 
    }