표시/숨기기 DIV

Question

I 변수 DIV 전환하려면 다음 코드를 가지고 내가 선택한 값과 일에 div의 이름을 연결하여 변수 ID를 얻기 위해 노력했다

$('#'+content_id).toggle(option.hasClass(show_class)); 

을 끈. 변수를 올바르게 명명하지 않았거나 잘못된 위치에 변수를 넣었습니다.

전체 코드는 다음과 같이

HTML

<select name="select_name" id="select_id" class="select_class" data-inline="true"> 
    <option class="show1" value="1">1</option> 
    <option class="show2" value="2">2</option> 
    <option class="show3" value="3">3</option> 
    <option class="show4" value="4">4</option> 
</select> 

<div id="content1">Div 1</div> 
<div id="content2">Div 2</div> 
<div id="content3">Div 3</div> 
<div id="content4">Div 4</div> 

<div id="testdiv"></div> 
<div id="testdiv2"></div> 
<div id="testdiv3"></div> 

JS

$(function() { 
    $('#select_id').change(function() { 
     var option = $(this).find('option:selected'); 

     var OptVal = document.getElementById('select_id').value; 
     document.getElementById("testdiv").innerHTML = OptVal; 

     var show_class = "show" + OptVal; 
     document.getElementById("testdiv2").innerHTML = show_class; 

     var content_id = "content" + OptVal; 
     document.getElementById("testdiv3").innerHTML = content_id; 

     $('#'+content_id).toggle(option.hasClass(show_class)); 

    }).change(); 
}); 

Answer 1

당신은 선택의 DIV를 보여주고 싶은 같은데요 옵션을 선택하십시오.

<select name="select_name" id="select_id" class="select_class" data-inline="true"> 
    <option class="show1" value="1">1</option> 
    <option class="show2" value="2">2</option> 
    <option class="show3" value="3">3</option> 
    <option class="show4" value="4">4</option> 
</select> 
<div id="content1" class="content">Div 1</div> 
<div id="content2" class="content">Div 2</div> 
<div id="content3" class="content">Div 3</div> 
<div id="content4" class="content">Div 4</div> 
<div id="testdiv"></div> 
<div id="testdiv2"></div> 
<div id="testdiv3"></div> 

내가 쉽게 그들 모두를 선택 된 div에 콘텐츠 클래스를 추가 :

는 여기에 귀하의 HTML입니다.

자바 스크립트 :

$(function() { 
    $('#select_id').change(function() { 
     var option = $(this).find('option:selected'); 

     var OptVal = document.getElementById('select_id').value; 
     document.getElementById("testdiv").innerHTML = OptVal; 

     var show_class = "show" + OptVal; 
     document.getElementById("testdiv2").innerHTML = show_class; 

     var content_id = "content" + OptVal; 
     document.getElementById("testdiv3").innerHTML = content_id; 

     $('.content').hide(); 

     $('#' + content_id).show(); 

    }).change(); 
}); 

나는 div의 모든 숨길 $('.content').hide();을 추가 한 후 내가 선택한 DIV를 보여 $('#' + content_id).show();을 사용했다.

다음은 작동하는 피들입니다. http://jsfiddle.net/JYbq2/