基于下拉选择的隐藏字段

Question

我有下拉菜单的类别，您可以选择一种类型的属性，如(定位，销售，购买)，并在此基础上，选择字段将显示，以添加额外的信息

但是每个选择都需要特定类型的字段。

因为我使用的是jQuery，但我不知道如何根据每个选择显示字段

菜单的Html代码：

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

提交表格

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

Answer 1

我用下面的代码修正了这个问题

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