Hide fields based on selection from dropdown-CodePudding

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" >
<option value="-1">Aucun</option>
<option  value="149">Colocation</option>
<option  value="150">colocation études</option>
<option  value="151">Colocation pour travail</option>
<option  value="440">Vacance</option>
<option  value="72">Luxe</option>
<option  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 >
 <div >
<label for="property_size"> Superficie en m<sup>2</sup>  .</label>
    <input type="number" id="property_size" size="40"  name="property_size" value="">
</div>
<div >
    <label for="property_lot_size"> Superficie du lot en m<sup>2</sup> . </label>
    <input type="number" id="property_lot_size" size="40"  name="property_lot_size" value="">
</div>

CodePudding user response：

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'});
                }
            }
        });