顯示/隱藏分區以及2個下拉列表

Question

我對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”和“ 1天價格圖表”）將顯示在div中。 如果現在單擊“指標圖表1”列表中的“指標1”，則希望“指標1”替換“ 1天價格圖表”。 如果單擊“指標圖表1”列表中的空白選項，它將顯示“ 1天價格圖表”。 而且，如果我單擊“價格圖表”中的任何選項，我希望每個選項中的“指標圖表”將其選項設置為空白，並始終顯示相關的價格圖表。

我知道這有點復雜和麻煩……但這對我來說非常重要。 請幫助我...我整夜都在尋找解決方案...

先感謝您。

Answer 1

我的建議是使用jquery ，它將使您的生活更加輕松（我在下面提供了一些鏈接）。 現在，我不太確定這是您要尋找的東西，但請告訴我。 我在這里使用jsfiddle提供了一個DEMO 。

碼：

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

顯示/隱藏分區以及2個下拉列表

問題描述

1 個解決方案

解決方案1
0 2012-08-28 21:23:42

顯示/隱藏分區以及2個下拉列表

問題描述

1 個解決方案

解決方案1 0 2012-08-28 21:23:42

解決方案1
0 2012-08-28 21:23:42