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

Show/Hide Division with 2 Drop-down Lists

本文关键字：隐藏 分区 列表显示 2个 使用      更新时间：2023-09-26

我对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>

目前，问题是我想要第二个下拉列表的内容，即"指标图"可以取代"皮尔斯图"的内容。例如，当我在第一个下拉列表中单击"1天"时，第二个下拉列表（1），即"指标图1"answers"1天价格图"将显示在一个div中。如果现在我在"指标表1"列表中单击了"指标1"，我希望"指标1"取代"1天物价图"。如果我点击"指标图1"列表中的空白选项，它将显示回"1天价格图"。此外，如果我点击"价格图"中的任何选项，我希望每个选项中的"指标图"将其选项设置为空，并始终显示相关的价格图。

我知道这有点复杂和麻烦。。。但这对我来说非常重要。请帮帮我……我找了一整晚的解决方案。。。。。。

提前谢谢。


我的建议是使用jquery，它会让你的生活更轻松（我在下面提供了一些链接）。现在，我不确定这是你想要的，但请告诉我。我使用jsfiddle提供了一个演示。

代码：

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

链接：

  • jquery.com
  • 教程
相关文章：