Je travaille sur un projet où l'utilisateur dispose d'une installation d'entrer dans son enregistrement, je souhaite savoir comment afficher ou masquer des boîtes de texte lors de la modification des valeurs de la boîte de sélection
Ici, j'ai une case de sélection nommée avec l'état matrimonial
Options pour l'état matrimonial sont les suivantes: «marié» et «non marié».
Voici le code: si l'utilisateur sélectionne "Marié" des options ci-dessus, une zone de texte apparaît pour entrer le nom du conjoint si l'utilisateur sélectionne "non marié" d'option ci-dessus, une zone de texte de nom de conjoint devrait disparaître.
7 Réponses :
Utiliser jQuery Changer CODE> Evénement pour sélectionner, Hopee Ceci aide, merci
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" required>
<option value="">Please Select Marital Status</option> <option value="Married">Married</option>
<option value="Un-Married">Unmarried</option>
</select>
<div class = "form-group col-md-3 hide">
<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
<input type = "text" autocomplete="off" class = "form-control " name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name" style = "color: black;" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>
Vous pouvez utiliser .Show () code> / .hide () code> méthodes à cet effet:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color: black;" required> <option value="">Please Select Marital Status</option> <option value="Married">Married</option> <option value="Un-Married">Single</option> </select> <div id="spouse" class = "form-group col-md-3" style="display:none"> <label for = "cc-payment" class = "control-label mb-1">Spouse Name</label> <input type = "text" autocomplete="off" class = "form-control" name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name" style = "color: black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required /> </div>
Merci pour votre réponse, mais où ajouter ces lignes: $ ('[name = "personnal_family_marital_status"]') '#spouse'). Afficher (): $ ('# conjoint'). Cacher ();});
Vous pouvez incorporer le code entre
Toutefois, s'il y a plus d'interaction avec la page que vous pourriez avoir besoin, je suggère de créer un fichier .js distinct et de se reporter à cela dans
Merci beaucoup frère
De rien. Si votre problème est résolu, vous pouvez accepter la réponse.
oui mon problème résolu fait
section de votre page Web, comme ceci: < Type de script = "Application / JavaScript" SRC = "/ JS / Fichier / Emplacement / AT / VOTRE / SERVER">
En supposant que vous avez inclus jQuery.
Vous devez profiter de la visibilité et html: vanilla javascript: visibilité dans CSS. Je vais utiliser Vanilla JavaScript au lieu de JQuery pour accéder au DOM. Dans votre exemple:
Vous voudrez utiliser l'événement L'événement de changement est tiré, et des éléments lorsqu'une modification de la valeur de l'élément est commis par l'utilisateur. Contrairement à l'événement d'entrée, l'événement de changement n'est pas nécessairement tiré pour chaque altération de la valeur d'un élément. P>
blockQuote> https: //developer.mozilla .org / fr-US / DOCS / Web / API / HTMLElement / Change_Event P> P> modifier code> sur l'élément SELECT. Basé sur sa valeur, vous pouvez afficher / masquer la section du conjoint
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style="color: black;" required>
<option value="">Please Select Marital Status</option>
<option value="Married">Married</option>
<option value="Un-Married">Un Married</option>
</select>
<div id="fgSpouse" class="form-group col-md-3" style="display:none">
<label for="cc-payment" class="control-label mb-1">Spouse Name</label>
<input type="text" autocomplete="off" class="form-control" name="Persoanl_Family_Spouse_Name" id="Persoanl_Family_Spouse_Name" style="color: black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable"
required />
</div>
Vous pouvez y parvenir en utilisant une fonction de changement de jQuery
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style = "color: black;" required>
<option value="">Please Select Marital Status</option>
<option value="Married">Married</option>
<option value="Un-Married">Un-Married</option>
</select>
<div class = "form-group col-md-3">
<div id="id_spouse" style="display:none">
<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
<input type = "text" autocomplete="off" class = "form-control" name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name" style = "color: black;" value="" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>
</div>**You can use jquery onchange function.**
$(document).on('change','#Personal_Family_Marital_Status', function(){
if($(this).val()=='Married'){
$('#Spouse').show();
}else{
$('#Spouse').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="Personal_Family_Marital_Status" id="Personal_Family_Marital_Status" style="color:black;" required>
<option value="">Please Select Marital Status</option>
<option value="Married">Married</option>
<option value="Un-Married">Un-Married</option>
</select>
<div class = "form-group col-md-3" id="Spouse" style="display:none;">
<label for = "cc-payment" class = "control-label mb-1">Spouse Name</label>
<input type = "text" autocomplete="off" class = "form-control" name="Persoanl_Family_Spouse_Name" id = "Persoanl_Family_Spouse_Name" style = "color: black;" value="<?php echo $data['Persoanl_Family_Spouse_Name'];?>" placeholder="Mention your Spouse Name" data-toggle="tooltip" title="Mention your Spouse Name if Applicable" required />
</div>
Quel code avez-vous essayé d'y parvenir? (En tant que conseil pour commencer, vous aurez besoin d'un auditeur d'événements pour l'événement Changer sur votre
J'essaie ceci mais quand je change de valeur de Select Box, je n'appellerai pas jQuery