コードは非常に長いです。しかし、何が必要かを示すための私の意見から、コード全体を投稿する必要があります。
3 つのドロップダウン メニュー。PHPとJavaScriptを使用しています。いずれかのメニューで値を変更すると、他の 2 つのメニューの値がデフォルトに設定されます。
改善/最適化が必要な長いコードを作成しました (短くするには JavaScript が必要です)。
投稿されたコード (php なし) はこちらhttp://jsfiddle.net/rigaconnect/QaUmK/5/ (理解できない理由により、jsfiddle に投稿されたコードは完全には機能しません。私の Web サイトでは、コードは期待どおりに機能します。)
まずは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を短くする方法を教えてください。コードの他の部分を改善できる可能性があります。
説明。デフォルト値は、 、 、 の最初の値( [0]
)です。ページが最初にロードされると、 、、が表示されます。したがって、ページが読み込まれます。ユーザーは、たとえば月のドロップダウン メニューから選択します。次に、ユーザーは、月の代わりに四半期を選択する必要があると判断します。ユーザーは四半期のドロップダウン メニューから選択します。月の値のドロップダウン メニューが自動的に に変わります。$options_month
$options_quarter
$options_halfyear
Select month
Select quarter
Select half-year
February
First
Select month