¿Es posible ocultar DIV en función del valor de un cuadro de selección (el cuadro de selección no tiene una ID o clase única)? La única forma única que puedo ver para posiblemente apuntarlo es que tiene 'Tipo de datos = "ubicación"'
<div class="bookly-form-group" data-type="location"><label>Location</label> <div><select><option value="0">Select location</option><option value="3">A Club</option><option value="4">B Club</option><option value="1">C Club</option><option value="6">Mobile Hire</option></select></div> </div>
En el código desplegable anterior, si el usuario selecciona "Contratación móvil", debería mostrar el DIV pegado a continuación... de lo contrario, el DIV debería estar oculto.
<div class="bookly-form-group" data-type="duration"><label>Duration</label> <div><select><option value="3">3 h (£120.00)</option><option value="4">4 h (£160.00)</option><option value="5">5 h (£200.00)</option><option value="6">6 h (£240.00)</option><option value="7">7 h (£280.00)</option><option value="8">8 h (£320.00)</option></select></div> </div>
Lo que quieres lograr se hace con el siguiente código:
//First Import JQuery CDN, then Following Code inside a script tag $(document).ready(function () { $('div[data-type="location"] select').on('change' , (function () { $('div[data-type="duration"]').hide(); })); }); ¡Espero que esto ayude!Código actualizado, esto debería funcionar:
//initially hide duration div $('div[data-type="duration"]').hide(); $('div[data-type="location"] select').on('change' ,(function () { var value = $('div[data-type="location"] select option:selected').text(); if(value === "Mobile Hire") { $('div[data-type="duration"]').show(); } else { $('div[data-type="duration"]').hide(); } }));