显示/隐藏分区与2下拉列表

我是全新的JavaScript和jQuery。目前我想用2个下拉列表创建一个简单的show hide功能。我将在代码下面进一步解释。如果可以，请尝试下面的代码，它可以帮助您更好地理解我的问题。显示/隐藏分区与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>

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

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

在此先感谢您。

来源

2012-08-28 user1616230

我的建议是使用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>

链接：

来源

2012-08-28 21:23:42 Dom

谢谢你回答我！这里有几个问题。 1.代码可以在jsfiddle中正常运行，但在Dreamweaver中不起作用。 2.对于功能部分，我想要的是当我在第一个下拉列表中单击“1天”时，不仅显示第二个下拉列表，而且在第二个下拉列表下方显示“价格图1”名单。然后，当我点击第二个下拉列表中的任何内容时，内容将替换您已使其工作的“价格图1”。非常感谢 – user1616230

转到http://docs.jquery.com/Downloading_jQuery并下载缩小版本（当前版本）。然后把它放在你的本地脚本文件夹中（或者你正在使用的任何东西）。然后像这样对该脚本进行引用：http://www.w3schools.com/tags/att_script_src.asp。希望这可以帮助！ – Dom

谢谢。功能部分如何？你能帮我解决吗？ – user1616230

显示/隐藏分区与2下拉列表

回答

相关问题