선택 드롭 다운 선택을 기반으로 Div 숨기기/표시

Question

WP 테마 옵션 패널을 개발 중이지만 WP와 관련이 없습니다.

나는 두 가지 연결 옵션이 있습니다

옵션 1 = 열 옵션 2 = 레이아웃

하나의 옵션이 같다 것을 지시 옵션에서 선택한 : 내가 가지고있는

<!-- this controls the selection of columns --> 
<select name="column_select" id="column_select"> 
    <option value="col1">1 column</option> 
    <option value="col2">2 column</option> 
    <option value="col3">3 column</option> 
</select> 


<!-- this controls the selection of columns --> 

<!-- if '1 column' is selected this div is shown --> 
<div id="layout_select1"> 
    You only have one column! 
</div> 

<!-- if '2 column' is selected this div is shown --> 
<div id="layout_select2"> 
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay1" '.$layout1.' />col1 
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay2" '.$layout2.' />col2 
</div> 

<!-- if '3 column' is selected this div is shown --> 
<div id="layout_select3"> 
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay3" '.$layout3.' />col1 
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay4" '.$layout4.' />col2 
    <input type="radio" id="'.$option[0].'" name="'.$option[0].'" size="25" value="lay5" '.$layout5.' />col2 
</div> 

대부분의 작업을 수행하는 jQuery 작업 :

<script> 
    $("#column_select").change(function() { 
     ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide(); 
     ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide(); 
     ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide(); 
    }); 
</script> 

지금 직면하고있는 문제는 페이지로드시 모든 div가 표시된다는 것입니다. 사용자가 선택 메뉴 옵션을 토글하는 경우에만 숨겨집니다.

로드시 올바른 div를 숨기려면 어떻게해야합니까?

업데이트 : 몇 가지 답변을 받았지만 제대로 설명하지 못했습니다. 페이지를로드 할 때 모든 div가 숨겨지는 것을 원하지 않습니다. 난 그냥 부하에 숨겨진 올바른 div 싶어요. 예를 들어 사용자가 '2 열'을 선택하면 두 번째 div가 표시됩니다. 그가 옵션 패널 내일 또는 다음 달로드로 돌아 오면 그는 여전히 두 번째 div가 표시되어야합니다. jQuery는로드시 현재 선택된 옵션을 감지하고 해당 div를 표시해야합니다. http://jsfiddle.net/NickBe/RGXa7/3/

내가 자바 스크립트 매우 새로운 오전 jQuery를 그래서 어떤 도움은 대단히 감사하겠습니다 :

당신은 내가 여기에 무슨 뜻인지 알 수 있습니다. 고마워요!

Answer 1

트리거 선택 변경 기능과 유사한 숨기려는 div의 내용은 "없음" 해당 div

Answer 2

일단 DOM이로드되면 숨길 필요가 있습니다.

<script> 
    $(function(){ 
     // This code block is called once the document has loaded in the browser. 
     $('#layout_select2, #layout_select3').hide(); 
    }); 

    $("#column_select").change(function() { 
     ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide(); 
     ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide(); 
     ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide(); 
    }); 

</script> 

Answer 3

CSS 클래스를 만들어 모든 div에 첨부 할 수 있습니다. div가 보이지 않더라도 화면의 적절한 공간을 차지하거나 완전히 보이지 않게하려면 none을 표시하려면 CSS의 visibility : hidden 속성을 사용할 수 있습니다.

display : none을 사용하면 기존 코드가 여전히 작동해야한다고 생각합니다. DIV는 숨겨져 있지만 옵션을 선택하면 jquery가 표시됩니다.

Answer 4

<script> 
    //you can initially hide your divs 
    $("#layout_select1").hide(); 
    $("#layout_select2").hide(); 
    $("#layout_select3").hide(); 

    $("#column_select").change(function() { 
     ($(this).val() == "col1") ? $("#layout_select1").show() : $("#layout_select1").hide(); 
     ($(this).val() == "col2") ? $("#layout_select2").show() : $("#layout_select2").hide(); 
     ($(this).val() == "col3") ? $("#layout_select3").show() : $("#layout_select3").hide(); 
    }); 
</script> 

Answer 5

디스플레이를 설정하면 document.ready()

$(document).ready(function(){ 
    $("#column_select").trigger('change'); 
}); 

이 표시됩니다

/숨기기에

<div id="layout_select2" style="display:none">  

Answer 6

<script> 
    $(function(){ 
     // This code block is called once the document has loaded in the browser. 
     $("#column_select").val('col1').trigger('change'); // reset the value for Browsers caching Form Element States 
     $('#layout_select2, #layout_select3').hide(); 
    }); 

    $("#column_select").change(function() { 
     $('#layout_select1, #layout_select2, #layout_select3').hide(); 
     $('#layout_select' + $(this).val().charAt(3)).show(); 
    }); 

</script> 

Answer 7

는 내가 열 옵션으로 된 div에 CSS 클래스를 할당 스탠리에 동의하고 사용합니다 - 당신은 디스플레이 설정할 수 있습니다

$("#column_select").change(function() {   
    $('div[id^=layout_select]').hide(); 
    $('.'+this.value).show(); 
}); 

: 기본에 대한 없음 옵션을.

데모 - 다른 요청에 다를 수 있습니다`#의 column_select`의 http://jsfiddle.net/RGXa7/10/