私はjavascriptとjqueryにまったく慣れていません。現在、2つのドロップダウンリストを備えた単純な表示非表示機能を作成したいと思います。コードの下でさらに説明します。可能であれば、以下のコードを試してください。私の質問をよりよく理解するのに役立つ場合があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.hide {
display:none;
}
</style>
<script type="text/javascript">
function PriceCharts(charts1){
var PriceCharts=charts1.options;
for (var a=1;a<=500;a++){
if (document.getElementById(PriceCharts[a].value)){
document.getElementById(PriceCharts[a].value).style.display=PriceCharts[a].selected?'block':'none';
}
}
}
function IndicatorCharts(charts2){
var IndicatorCharts=charts2.options;
for (var b=1;b<=500;b++){
if (document.getElementById(IndicatorCharts[b].value)){
document.getElementById(IndicatorCharts[b].value).style.display=IndicatorCharts[b].selected?'block':'none';
}
}
}
</script>
</head>
<body>
<div style="width:800px;border:1px solid black">
Price Chart<select onchange="PriceCharts(this);">
<option value="" ></option>
<option value="PriceCharts1" >1 day</option>
<option value="PriceCharts2" >5 days</option>
</select>
</div>
</div>
<div style="width:800px;height:300px;border:1px solid black">
<div id="PriceCharts1" class="hide" >
Indicator Chart 1<select onchange="IndicatorCharts(this);">
<option value="" ></option>
<option value="IndicatorCharts1" >Indicator 1</option>
<option value="IndicatorCharts2" >Indicator 2</option>
</select>
<div style="height:250px;border:1px solid black">
1 day price chart
</div>
</div>
<div id="PriceCharts2" class="hide">
Indicator Chart 2<select onchange="IndicatorCharts(this);">
<option value=""></option>
<option value="IndicatorCharts3" >Indicator 3</option>
<option value="IndicatorCharts4" >Indicator 4</option>
</select>
<div style="height:250px;border:1px solid black">
5 day price chart
</div>
</div>
</div>
</body>
</html>
現在、問題は、2番目のドロップダウンリストのコンテンツである「インジケーターチャート」が「PirceChart」のコンテンツを置き換えることができるようにすることです。たとえば、最初のドロップダウンリストで[1日]をクリックすると、2番目のドロップダウンリスト(1)である「インジケーターチャート1」と「1日価格チャート」がdivに表示されます。 。「インジケーターチャート1」リストの「インジケーター1」をクリックすると、「1日足チャート」の代わりに「インジケーター1」が必要になります。「インジケーターチャート1」リストの空白のオプションをクリックすると、「1日価格チャート」が表示されます。また、「価格チャート」のオプションをクリックした場合、各オプションの「インジケーターチャート」のオプションを空白に設定し、常に関連する価格チャートを表示したいと思います。
これは少し複雑で面倒なことですが、私にとっては非常に重要です。私を助けてください...私は一晩中解決策を探しました......
前もって感謝します。