Jquery Menüoption auswählen Scheitert, wenn die Seite aktualisiert wird?

Question

Ich habe ein Auswahlmenü mit zwei Optionen, ja oder nein. Wenn der Benutzer Ja auswählt, wird die Klasse "Versteckt" aus der Tabelle entfernt, die dann die Tabelle anzeigt. Wenn nein, ist die Tabelle ausgeblendet.

Wenn ich die Webseite aktualisiere, bleibt das Auswahlmenü auf der vorherigen Auswahl und der Code wird nicht ausgelöst, bis ich die Option erneut wähle.

Wie kann ich das beheben?

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

    }); 
}); 

Answer 1

Sie können dieses Problem mit zwei Szenarien beheben.

Szenario 1, nach Klasse standardmäßig auf Ihre HTML-Element hinzugefügt wird und standardmäßig Ihre gewünschte Option auswählen:

HTML:

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

Szenario 2, durch Ihre gewünschte Auswahl Option standardmäßig und schreiben Sie Ihre JQuery-Funktionalität in einer benutzerdefinierten Funktion. Dann müssen Sie Ihre benutzerdefinierte Funktion in beiden Situationen e.i aufrufen. Document On ready und Select-Box 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'); 
    } 

} 

By the way, wenn Sie mit einem HTML Element Select mit JQuery Method .change() handelt ist ein guter Ansatz, also, wenn Sie bereit sind, dies zu verwenden, können Sie ca n schreiben Sie Ihren Code wie folgt:

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

Ohne Markup geliefert, ich glaube, Sie dies zu erreichen versuchen:

$(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>

Ich habe die Freiheit, Ihre Anfragen als Variablen speichern. Denken Sie daran, dass das DOM langsam ist, und Sie sollten nach Möglichkeit mehrere DOM-Abfragen vermeiden. Auch das Abhören des change-Ereignisses funktioniert in diesem Beispiel besser als click, da sich das value des select-Elements nicht unter click, sondern unter change ändert.