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>

目前，问题是我想要第二个下拉列表的内容，即“Indicator Chart”可以替换“Pirce Chart”的内容。例如，当我在第一个下拉列表中单击“1 day”时，第二个下拉列表（1），即“Indicator Chart 1”和“1 day price chart”将显示在一个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 回答