I have dropdown menu for categories where you can select a type of property like (colocation, sell, buy) and based on that selection fields will show to add extra information's
But every selection need specific type of fields
For I'm using jQuery but I don't know how to show fields based on every selection
Html code for menu :
<select name="prop_category" id="prop_category_submit" class="select-submit2">
<option value="-1">Aucun</option>
<option class="level-0" value="149">Colocation</option>
<option class="level-1" value="150">colocation études</option>
<option class="level-1" value="151">Colocation pour travail</option>
<option class="level-1" value="440">Vacance</option>
<option class="level-0" value="72">Luxe</option>
<option class="level-1" value="76">Appartement</option>
</select>
jQuery
jQuery("#prop_category_submit").change(function(){
const currentVal = jQuery("#prop_category_submit").val();
let imputList = ["property_size","property_lot_size"];
if (['149','150','151','440','72','76'].includes(currentVal)) {
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'none'});
}
}else{
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'block'});
}
}
});
Submit form
<div class="profile-onprofile row">
<div class="col-md-6">
<label for="property_size"> Superficie en m<sup>2</sup> .</label>
<input type="number" id="property_size" size="40" class="form-control" name="property_size" value="">
</div>
<div class="col-md-6 ">
<label for="property_lot_size"> Superficie du lot en m<sup>2</sup> . </label>
<input type="number" id="property_lot_size" size="40" class="form-control" name="property_lot_size" value="">
</div>
I fixed this question by using this code
jQuery("#prop_category_submit").change(function(){
const currentVal = jQuery("#prop_category_submit").val();
let imputList = ["property_rooms","property_bedrooms","property_bathrooms", "meuble","property_size"];
if (['65','37','66','68','70','69','67','71','27'].includes(currentVal)) {
if(currentVal=="65"){ //Terrains
jQuery("#property_rooms").parent().css('display','none');
jQuery("#property_bedrooms").parent().css('display','block');
jQuery("#property_bathrooms").parent().css('display','block');
jQuery("#meuble").parent().css('display','block');
jQuery("#property_lot_size").parent().css('display','none');
jQuery("#property-garage").parent().css('display','block');
jQuery("#property_size").parent().css('display','block');
}
}else{
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'block'});
}
}
});