Php JavaScript3下拉菜单。更改一个下拉菜单时,为其他两个下拉菜单设置默认值。需要优化

Php JavaScript3下拉菜单。更改一个下拉菜单时,为其他两个下拉菜单设置默认值。需要优化,php,javascript,Php,Javascript,代码很长。但从我的观点来看,为了说明什么是必要的,我必须发布整个代码 三个下拉菜单。使用Php和javascript。如果在其中一个菜单中更改值,则其他两个菜单中的值设置为默认值 创建了需要改进/优化的长代码(缩短代码需要javascript) 在这里发布代码(没有php)(由于不可理解的原因,在JSFIDLE中发布的代码不能完全工作;在我的网站上,代码按预期工作。) 首先是php $options_month = array("Select month", "January", "Februa

代码很长。但从我的观点来看,为了说明什么是必要的,我必须发布整个代码

三个下拉菜单。使用Php和javascript。如果在其中一个菜单中更改值,则其他两个菜单中的值设置为默认值

创建了需要改进/优化的长代码(缩短代码需要javascript)

在这里发布代码(没有php)(由于不可理解的原因,在JSFIDLE中发布的代码不能完全工作;在我的网站上,代码按预期工作。)

首先是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。可能代码的其他部分可以改进


澄清。默认值是
$options\u month
$options\u quarty
$options\u halfyear
中的第一个值(
[0]
)。首次加载页面时,可以看到
选择月份
选择季度
选择半年
。所以页面加载。用户从月份下拉菜单中选择例如<代码>二月。然后用户决定选择季度而不是月份。用户从quarters下拉菜单中选择第一个
。月份值下拉菜单自动更改为
选择月份

这是我的解决方案。简单得多。然而,我也改变了html布局

HTML更新:(在选择标记中有onchange)


...
...
...
Javascript更新:(减少到9行)

var dd_数组=['month_id','quarty_id','halfyear_id'];
功能更新\u其他\u dd(dd\u id){

对于(i=0;i)您的问题特定于月份/季度、半年?当您说要更改默认值时,您的意思是要将其选中吗?您需要澄清您的问题。您是否尝试根据所选月份(依此类推)选择季度和半年,或者当选择一个月时,您是否试图将季度和半年更改为默认值?它们是非常不同的事情。我在问题的末尾写了澄清。
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;    
<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' )">
...
    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;
    }
    }
    }