Tengo un menú desplegable para categorías donde puede seleccionar un tipo de propiedad como (colocación, venta, compra) y, según esa selección, se mostrarán campos para agregar información adicional.
Pero cada selección necesita un tipo específico de campos
Porque estoy usando jQuery pero no sé cómo mostrar campos en función de cada selección
Código HTML para el menú:
<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'}); } } });Enviar formulario
<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>Resolví esta pregunta usando este código
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'}); } } });