Jquery Selectメニューオプションページが更新されると失敗しますか？

Question

私は2つのオプション、はいまたはいいえを持つ選択メニューを持っています。ユーザーが「はい」を選択した場合、クラス「非表示」は表から削除され、表が表示されます。いいえの場合、表は非表示になります。

ウェブページを更新すると、選択メニューは前の選択肢にとどまり、コードを選択するまでコードが実行されません。

どうすればこの問題を解決できますか？付属の任意のマークアップなし

$(document).ready(function(){ 
    $('#checkrequestyesorno').click(function() { 
     if($('#checkrequestyesorno').val() == "Yes") { 
      $("#checkrequesttable").removeClass('hidden'); 
     }else{ 
      $("#checkrequesttable").addClass('hidden'); 
     } 

    }); 
}); 

Answer 1

2つのシナリオを使用してこの問題を解決できます。あなたのHTML要素にデフォルトでクラスを追加すると、デフォルトでは、あなたの必要なオプションを選択して

シナリオ1、：

HTML：あなたが必要な選択することにより、

<div id="checkrequesttable" class="hidden">...</div> 
<select id="checkrequestyesorno"> 
    <option value="no" selected>No</option> 
    <option value="yes">Yes</option> 
</select> 

シナリオ2、オプションを使用し、JQuery機能をカスタム関数で記述します。次に、両方の状況でカスタム関数を呼び出す必要があります。 Document On readyと選択ボックスclick：

HTML：

<select id="checkrequestyesorno"> 
    <option value="no" selected>No</option> 
    <option value="yes">Yes</option> 
</select> 

Javascriptを/ jQueryの：

$(document).ready(function() { 
    checkRequestFunc(); 
    $('#checkrequestyesorno').click(function() { 
     checkRequestFunc(); 
    }); 
}); 

function checkRequestFunc(){ 

    if($('#checkrequestyesorno').val() == "Yes") { 
     $("#checkrequesttable").removeClass('hidden'); 
    }else{ 
     $("#checkrequesttable").addClass('hidden'); 
    } 

} 

ところであなたはJQuery Method .change()を使用してHTML Element Selectを扱っている場合には、良いアプローチなので、もしあなたがこれを使用して欲しいなら、あなたはca nは以下のようにコードを記述します。

はHTML：

<select id="checkrequestyesorno"> 
    <option value="no" selected>No</option> 
    <option value="yes">Yes</option> 
</select> 

Javascriptを/ jQueryの：

$(document).ready(function() { 
    checkRequestFunc(); 
    $('#checkrequestyesorno').change(function() { 
     checkRequestFunc(); 
    }); 
}); 

function checkRequestFunc(){ 

    if($('#checkrequestyesorno').val() == "Yes") { 
     $("#checkrequesttable").removeClass('hidden'); 
    }else{ 
     $("#checkrequesttable").addClass('hidden'); 
    } 

} 

Answer 2

、私はあなたがこれを実現しようとしていると信じて：

$(document).ready(function() { 
 
    var checkYesOrNo = $('#checkrequestyesorno'); 
 
    var checkTable = $('#checkrequesttable'); 
 
    checkYesOrNo.change(function() { 
 
    if (checkYesOrNo.val() === "Yes") { 
 
     checkTable.removeClass('hidden'); 
 
    } else { 
 
     checkTable.addClass('hidden'); 
 
    } 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Show table:</h3> 
 
<select id="checkrequestyesorno"> 
 
    <option value="No" selected>No</option> 
 
    <option value="Yes">Yes</option> 
 
</select> 
 

 
<table class="hidden" id="checkrequesttable"> 
 
    <tr> 
 
    <thead> 
 
     <tr> 
 
     <th>fooTable</th> 
 
     </tr> 
 
    </thead> 
 
    <td>bar</td> 
 
    <td>baz</td> 
 
    </tr> 
 

 
</table>

私は変数としてクエリを保存するの自由を取りました。 DOMはが遅いであることを忘れないでください。できるだけ複数のDOMクエリを避けるべきです。また、イベントをリッスンすると、click要素のvalueがclickではなく、changeに変更されるため、この例ではclickよりもうまく機能します。