代碼很長。但從我的觀點來看,我必須發佈完整的代碼。Javascript 3下拉菜單。在更改一個下拉菜單時,爲其他兩個下拉菜單設置默認值。需要優化
三個下拉菜單。使用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
。
是你的問題具體到月/季度,半年?當你說你想改變默認設置時,你的意思是你想讓它們變成被選中的嗎? –
你需要澄清你的問題。您是否試圖根據所選月份(如此等等)選擇季度和半年,或者您是否試圖在選擇月份時將季度和半年更改爲默認值?他們是非常不同的東西。 –
我在問題結尾寫了說明。 – user2465936