Question

我是javascript和jquery的新手。目前我想用2下拉列表创建一个简单的show hide函数。我将在下面的代码中进一步解释。如果可以，请尝试下面的代码，它可以帮助您更好地理解我的问题。

<!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>

目前，问题是我想要第二个下拉列表的内容，这是“指标图表”可以替换“Pirce Chart”的内容。例如，当我在第一个下拉列表中单击“1天”时，第二个下拉列表（1），即“指标图表1”和“1天价格图表”将显示在div中。如果现在我点击“指标图表1”列表中的“指标1”，我希望“指标1”替换“1天价格图表”。如果我单击“指标图表1”列表中的空白选项，它将显示“1天价格图表”。而且，如果我点击“价格图表”中的任何选项，我希望每个选项中的“指标图表”将其选项设置为空白并始终显示相关的价格图表。

我知道这有点复杂和麻烦......但对我们来说这非常重要。请帮帮我...我已经搜索了整个晚上的解决方案......

提前谢谢。

Answer 1

我的建议是使用jquery，它会让你的生活更轻松（我在下面提供了一些链接）。现在，我不是肯定这是你正在寻找的，但让我知道。我使用jsfiddle提供了DEMO HERE。

CODE：

<!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>

LINKS：

使用2个下拉列表显示/隐藏分部

1 个答案: