0

私は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日価格チャート」が表示されます。また、「価格チャート」のオプションをクリックした場合、各オプションの「インジケーターチャート」のオプションを空白に設定し、常に関連する価格チャートを表示したいと思います。

これは少し複雑で面倒なことですが、私にとっては非常に重要です。私を助けてください...私は一晩中解決策を探しました......

前もって感謝します。

4

1 に答える 1

0


jquery を使用することをお勧めします。これにより、作業が大幅に楽になります (以下にリンクをいくつか示します)。今、私はこれがあなたが探しているものであるとは確信していませんが、私に知らせてください. jsfiddle を使用してDEMO HEREを提供しました。

コード：

<!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">
div{
    width:800px;
    border:1px solid black;
    display:block;
}
#pcDiv{
    width:800px;
    border:1px solid black;
}
.content{
 height:250px;   
}
#priceChart1, #priceChart2, #indicatorChartInfo1, #indicatorChartInfo2{
 display:none;   
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){   //MAKES SURE DOCUMENT IS READY
    $("#pcSelect").change(function() {   
        //.change(function(){ similar to ONCHANGE
        // WHEN USING JQUERY, MAKE SURE TO USE '$(this)' instead of 'this'
        //I also used filter/index to find which option was selected
      var index= $(this).children(":selected").index();
            if(index!=0){
               $("#pcDiv").siblings().hide();
               $("#priceChart" + index).show();
            }
            else{
                $("#pcDiv").siblings().hide();
            }
    });  

    $("#priceChart1>select, #priceChart2>select").change(function(){
        var index= $(this).children(":selected").index();
        $(this).siblings().show();

          if(index!=0){
              $(this).siblings().text($(this).children(":selected").text());
          }
          else{
                $(this).siblings().hide();
          }
    });
});​
</script>
</head>

<body>
<div id="pcDiv">
Price Chart   
    <select id="pcSelect">
        <option>--Choose--</option> <!--CAN SAY WHATEVER YOU LIKE -->
        <option>1 day</option>
        <option>5 days</option>
    </select>
</div>

<div id="priceChart1">
    Indicator Chart 1
    <select>
        <option></option>
        <option>Indicator 1</option>
        <option>Indicator 2</option>
    </select>

    <div id="indicatorChartInfo1" class="content">
    Info1
    </div>
</div>

<div id="priceChart2">
Indicator Chart 2
    <select>
        <option></option>
        <option>Indicator 3</option>
        <option>Indicator 4</option>
    </select>

    <div id="indicatorChartInfo2" class="content">
    Info2
    </div>
</div>
</body>
</html>

リンク:

于 2012-08-28T21:23:42.207 に答える