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에 표시됩니다 . "Indicator Chart 1"목록에서 "Indicator 1"을 클릭하면 "Indicator 1"을 "1 day price chart"로 대체하십시오. "지표 차트 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로 이동하여 축소 된 버전 (UNDER CURRENT VERSION)을 다운로드하십시오. 그런 다음 로컬 스크립트 폴더 (또는 사용중인 곳)에 저장하십시오. 그런 다음 해당 스크립트에 대한 참조를 http://www.w3schools.com/tags/att_script_src.asp와 같이 작성하십시오. 희망이 도움이! – Dom

감사합니다. 함수 부분은 어떻습니까? 고칠 수있게 도와 줄 수 있니? – user1616230

2 드롭 다운 목록으로 나누기 표시/숨기기

답변

관련 문제