我正忙着实现一个流表单，根据需要显示和隐藏div。
onLoad除了chartdiv1和初始选择外，所有div都被隐藏。
选择选项 1）单位价格以美元计算 - 实际上只保留chartdiv1 2）替代货币的单位价格 - 图表中的数字2 +额外的下拉列表（#currency）允许引入额外的Chartdivs（全部初始隐藏）。 3）一段时间内的单位价格表现 - 使用图表5 +额外下拉列表（#currency2）隐藏上一个下拉列表，这样就可以选择附加日期。
我遇到的问题是这些额外下拉列表中最后点击的div不会清除，我最终会同时显示两个div。如果在主下拉菜单中进行其他修正，我该如何操纵我的JQUERY代码以使div清除
我已经附上我的JSfiddle http://jsfiddle.net/Jason1975/9jz8pjwy/来表明这一点，我很抱歉虽然我是JSfiddle的新手并且不知道如何在其中添加我的Body onLoad =“hide（）”函数显示所有的div都是目前显示，一些帮助也很好。
HTML代码
<form class="main" id="main">
Chart Type:
<select id="chart-type" class="unit-price" >
<option value="unit-price1" id="unit-price1">Unit Price in US Dollars</option>
<option value="unit-price2" id="unit-price2">Unit Price in Alternative Currency</option> <option value="unit-price3" id="unit-price3">Unit Price Performance over a Period</option>
</select>
<span id="hidden">Alternative Currency:</span>
<select id="currency" class="unit-price-period" >
<option value="GSO_EUR" id="GSO_EUR">GSO_EUR</option>
<option value="GSO_GBP" id="GSO_GBP">GSO_GBP</option>
<option value="GSO_ZAR" id="GSO_ZAR">GSO_ZAR</option>
</select>
<span id="hidden2">Alternative Currency Period:</span>
<select id="currency2" class="unit-price-period">
<option value="GSO_USD1" id="GSO_USD1">GSO_USD</option>
<option value="GSO_EUR1" id="GSO_EUR1">GSO_EUR</option>
<option value="GSO_GBP1" id="GSO_GBP1">GSO_GBP</option>
<option value="GSO_ZAR1" id="GSO_ZAR1">GSO_ZAR</option>
</select>
</form><br /><br />
<div id="chartdiv1" style="width:100%; height:250px; background: #CCC">CHARTDIV1 - USD CURRENCY</div><br />
<div id="chartdiv2" style="width:100%; height:250px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div><br />
<div id="chartdiv3" style="width:100%; height:250px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div><br />
<div id="chartdiv4" style="width:100%; height:250px; background: #CCC">CHARTDIV4 - ZAR CURRENCY</div><br />
<!-- End Chartdiv3 -->
<!-- Chartdiv5 - USD Unit Price Perfomance over a Period -->
<div id="chartdiv5" style="width:100%; height:250px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div><br />
<div id="chartdiv6" style="width:100%; height:250px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div><br />
<div id="chartdiv7" style="width:100%; height:250px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div><br />
<div id="chartdiv8" style="width:100%; height:250px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div><br />
JAVASCRIPT / JQUERY
// MENU TOGGLE SCRIPTS
// Menu Toggle Script 1 - Working
$(document).ready(function() {
hide();
$( '#chart-type').change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "unit-price1" ) {
$( 'div#chartdiv1' ).show();
} else {
$( 'div#chartdiv1' ).hide();
}
});
$( '#chart-type' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "unit-price2" ) {
$( 'div#chartdiv2, #hidden, #currency' ).show();
} else {
$( 'div#chartdiv2, #hidden, #currency' ).hide();
}
});
$( '#chart-type' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "unit-price3" ) {
$( 'div#chartdiv5, #hidden2, #currency2' ).show();
} else {
$( 'div#chartdiv5, #hidden2, #currency2' ).hide();
}
});
// Menu Script 2
$( '#currency' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_EUR" ) {
$( 'div#chartdiv2' ).show();
} else {
$( 'div#chartdiv2' ).hide();
}
});
$( '#currency' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_GBP" ) {
$( 'div#chartdiv3' ).show();
} else {
$( 'div#chartdiv3' ).hide();
}
});
$( '#currency' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_ZAR" ) {
$( 'div#chartdiv4' ).show();
} else {
$( 'div#chartdiv4' ).hide();
}
});
// Menu Script 3
$( '#currency2' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_USD1" ) {
$( 'div#chartdiv5' ).show();
} else {
$( 'div#chartdiv5' ).hide();
}
});
$( '#currency2' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_EUR1" ) {
$( 'div#chartdiv6' ).show();
} else {
$( 'div#chartdiv6' ).hide();
}
});
$( '#currency2' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_GBP1" ) {
$( 'div#chartdiv7' ).show();
} else {
$( 'div#chartdiv7' ).hide();
}
});
$( '#currency2' ).change( function() {
var $select = $( this ),
selected = $select.val();
if ( selected == "GSO_ZAR1" ) {
$( 'div#chartdiv8' ).show();
} else {
$( 'div#chartdiv8' ).hide();
}
});
});
function hide() {
var show = ['chartdiv1'];
for ( var i = 0; i < show.length; ++i )
document.getElementById(show[i]).style.display = "block";
var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
for ( var i = 0; i < hide.length; ++i )
document.getElementById(hide[i]).style.display = "none";
}
非常感谢您的帮助