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

この場合に行うには、スマートなもので、それを呼び出すことができます（つまり、togglePillar）。あなたは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>