jQuery show hide 선택에 따라 un-orderd 목록 표시

Question

드롭 다운에서 예를 선택하면 "ul"을 표시하려고합니다. 그것을 클릭하면 잘 작동합니다. 하지만 '예'옵션이 이미 선택되어 있거나 옵션 '아니오'가 이미 선택되어있는 경우 숨길 경우 페이지로드시이를 원합니다.

는

$(document).ready(function(){ 
 
     $('#Limit').on('change', function() { 
 
      if (this.value == 'true') 
 
      { 
 
      $("#first-piller").show(); 
 
      } 
 
      else 
 
      { 
 
      $("#first-piller").hide(); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="Limit"> 
 
     <option value="true" selected>Yes</option> 
 
     <option value="false">No</option> 
 
     </select> 
 
     
 
     <!-- Show hide depending selection --> 
 

 
     <ul id="first-piller"> 
 
     <li> 
 
     <div class="left col-sm-6 col-xs-6 text-left left-indent" id="overview" > 
 
     <p><b>First Piller</b></p> 
 
     </div> 
 
     <div class="right col-sm-6 col-xs-6" class="pillers"> 
 
     <select><option value="1">4 or more</option> 
 
      <option value="2" >0 - 3 </option> 
 
      <option value="3" >0 or more</option> 
 
     </select> 
 
     </div> 
 
     </li> 
 
     </ul>

는 사람이 좀 도와 줄래 ? 미리 감사드립니다.

Answer 1

당신의 DOM이 준비하고 change 이벤트가 결합 된 후, 수동으로 실행할 수있는 경우 :

$(document).ready(function() { 
    // your rest of the code 

    $('#Limit').change(); 
}); 

이 결국 이벤트 핸들러의 코드를 실행합니다 변경 이벤트를 트리거합니다.

Answer 2

당신은 그 자체로 논리를 추출하는 것입니다 함수를 작성 .ready 기능

$(document).ready(function() { 
// Code you want to run at the start 
}) 

Answer 3

을 사용하고 두 경우 모두

function FirstPiller(sender) 
{ 
if (sender.val() == 'true') 
    { 
    $("#first-piller").show(); 
    } 
    else 
    { 
    $("#first-piller").hide(); 
    } 
} 

$(document).ready(function(){ 

    FirstPiller($('#Limit')); 
    console.log("Calling"); 
}); 

$('#Limit').on('change', function() { 
    FirstPiller($(this)); 
}); 

Answer 4

이 경우에 할 수있는 스마트 한 것에 호출 할 수 있습니다 기능 (예 : 토글 필). 그런 식으로 당신은 문서로드를 발사하고 또한 change 이벤트 처리기에서 콜백로에 전달할 수 있습니다

$(document).ready(function() { 
 
    var $limit = $('#Limit'); 
 
    var $firstPillar = $("#first-piller"); 
 
    
 
    togglePillar(); 
 
    
 
    $limit.on('change', togglePillar); 
 

 
    function togglePillar() { 
 
    if ($limit.val() == 'true') { 
 
     $firstPillar.show(); 
 
    } else { 
 
     $firstPillar.hide(); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="Limit"> 
 
    <option value="true" selected>Yes</option> 
 
    <option value="false">No</option> 
 
    </select> 
 

 
<!-- Show hide depending selection --> 
 

 
<ul id="first-piller"> 
 
    <li> 
 
    <div class="left col-sm-6 col-xs-6 text-left left-indent" id="overview"> 
 
     <p><b>First Piller</b></p> 
 
    </div> 
 
    <div class="right col-sm-6 col-xs-6" class="pillers"> 
 
     <select><option value="1">4 or more</option> 
 
     <option value="2" >0 - 3 </option> 
 
     <option value="3" >0 or more</option> 
 
    </select> 
 
    </div> 
 
    </li> 
 
</ul>