J'ai cette sélection et je souhaite que si je choisis l'option value = "2", le champ de saisie suivant de la date d'expédition disparaisse
<div class="form-group"> <label for="reason">Reden van storing</label> <select id="reason" name="reason" class="form-control"> <option value="1">Tijdelijk niet leverbaar</option> <option value="2">Uit assortiment, niet meer leverbaar</option> <option value="3">Minder artikelen beschikbaar</option> </select> </div> <div class="form-group"> <label>Shipment date</label> <input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in"> </div>
6 Réponses :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div class="form-group"> <label for="reason">Reden van storing</label> <select id="reason" name="reason" class="form-control" > <option value="1">Tijdelijk niet leverbaar</option> <option value="2">Uit assortiment, niet meer leverbaar</option> <option value="3">Minder artikelen beschikbaar</option> </select> </div> <div class="form-group"> <label>Shipment date</label> <input type="date" id="shipdate" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in"> </div>
$("#reason").change(function(){
var valueoption=$("#reason").val();
if(valueoption==2)
{
$("#shipdate").hide();
}
else{
$("#shipdate").show();
}
});
Où est la balise jQuery d'OP?
Vous pouvez utiliser l'attribut d'événement onchange pour ce faire. Consultez ici un exemple d'utilisation.
Bien que cela puisse théoriquement répondre à la question, il serait préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence . W3schools est également une mauvaise référence. Essayez plutôt MDN
<div class="form-group" id="shipdate"> <label>Shipment date</label> <input type="date" id="shipdate" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in"> </div>
Où est la balise jQuery d'OP?
Utilisez les écouteurs d'événements pour vous atteler au chargement de la page et sélectionner le changement
Remarque j'ai donné un identifiant à la div
vanilla JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="reason">Reden van storing</label>
<select id="reason" name="reason" class="form-control">
<option value="1">Tijdelijk niet leverbaar</option>
<option value="2" selected>Uit assortiment, niet meer leverbaar</option>
<option value="3">Minder artikelen beschikbaar</option>
</select>
</div>
<div class="form-group" id="shipmentDiv">
<label>Shipment date</label>
<input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>
$(function() {
$("#reason").on("change",function() {
$("#shipmentDiv").toggle(this.value!=="2")
}).change()
})
jQuery bascule
<div class="form-group">
<label for="reason">Reden van storing</label>
<select id="reason" name="reason" class="form-control">
<option value="1">Tijdelijk niet leverbaar</option>
<option value="2" selected>Uit assortiment, niet meer leverbaar</option>
<option value="3">Minder artikelen beschikbaar</option>
</select>
</div>
<div class="form-group" id="shipmentDiv">
<label>Shipment date</label>
<input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>
window.addEventListener("load",function() {
document.getElementById("reason").addEventListener("change",function() {
document.getElementById("shipmentDiv").style.display = this.value==="2" ? "none": "block"
})
document.getElementById("reason").dispatchEvent(new Event('change')); // in case it was selected at load time
})
vous pouvez utiliser la méthode jQuery hide et show pour cela.
html
$('#reason').on('change', function(){
var reason = $('#reason').val();
if (reason == 2) {
$('#date_info').hide();
}
else{
$('#date_info').show();
}
});
script p>
<div class="form-group">
<label for="reason">Reden van storing</label>
<select id="reason" name="reason" class="form-control" id="reason">
<option value="1">Tijdelijk niet leverbaar</option>
<option value="2">Uit assortiment, niet meer leverbaar</option>
<option value="3">Minder artikelen beschikbaar</option>
</select>
</div>
<div class="form-group" id="date_info">
<label>Shipment date</label>
<input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>
recherchez les identifiants dans le html
Où est la balise jQuery d'OP?
il n'y en a pas. mais comme je l'ai mentionné dans ma réponse, l'op peut utiliser jQuery. je pense que rien ne va pas ici. paix :)
Utilisez un écouteur d'événements et validez la valeur sélectionnée.
<div class="form-group">
<label for="reason">Reden van storing</label>
<select id="reason" name="reason" class="form-control">
<option value="1">Tijdelijk niet leverbaar</option>
<option value="2">Uit assortiment, niet meer leverbaar</option>
<option value="3">Minder artikelen beschikbaar</option>
</select>
</div>
<div class="form-group">
<label>Shipment date</label>
<input type="date" name="shipment_date" required="" class="form-control" placeholder="Vul verzenddatum in">
</div>
const reason = document.querySelector('#reason').addEventListener("change", () => {
const result = document.querySelector('input.form-control');
if (document.getElementById("reason").selectedIndex == 1) {
result.style.display = "none";
} else {
result.style.display = "inline-block";
}
});
@mplungjan est ajusté maintenant
vous voulez le faire disparaître complètement ?? ou voulez simplement le cacher ??
@zahidhasanemon je veux le cacher
Veuillez interagir avec les réponses et regardez ici: meta.stackexchange.com/questions/5234/…