mi codigo html
<select> <option>monthly</option> <option>annually</option> <option>triennially</option> </select> <div class="pricing-btn"> <a href="<?php echo $ButtonLink1; ?>" class="btn"> Get started</a> </div> <div class="pricing-btn"> <a href="<?php echo $ButtonLink2; ?>" class="btn"> Get started</a> </div> <div class="pricing-btn"> <a href="<?php echo $ButtonLink3; ?>" class="btn"> Get started</a> </div> Cuando se selecciona la opción monthly , debe estar visible la div con $ButtonLink1 .
Cuando se selecciona la opción annually , div con $ButtonLink2 debería estar visible.
Cuando se selecciona la opción triennially , debe estar visible div con $ButtonLink3 .
El valor visible predeterminado debe ser la opción monthly y div con $ButtonLink1 .
¿Alguien puede decirme cómo escribir un script para lograr esto?
Creo que necesitas algo como esto, este código agrega un evento al seleccionar, este evento obtiene el nombre del botón que necesitas y muestra.
document.getElementById("select").addEventListener("change", (ev) => { var buttonId = document.getElementById("select").value; var button = document.querySelector('[button="' + buttonId + '"]'); var buttons = document.querySelectorAll(".btn").forEach(el => { el.style.display = 'none'; }); button.style.display = 'block'; }); .btn { display: none; } <select id="select"> <option value="" selected hidden>Select</option> <option value="google">monthly</option> <option value="github">annually</option> <option value="stack">triennially</option> </select> <div class="pricing-btn"> <a href="https://github.com" class="btn" button="github"> Get started Git</a> </div> <div class="pricing-btn"> <a href="https://google.com" class="btn" button="google"> Get started Google</a> </div> <div class="pricing-btn"> <a href="https://stackoverflow.com" class="btn" button="stack"> Get started Stack</a> </div>Con apenas cambios en el HTML, puede hacerlo fácilmente comparando el índice selectedIndex de la option en el menú de select con el índice dentro de la lista de nodos devuelto al consultar el DOM para todos los nodos con la clase pricing-btn . Para asegurarse de que estos elementos pricing-btn estén ocultos de forma predeterminada, excepto el primero, establezca su propiedad de visualización css en none y asigne una clase de visibilidad dentro del controlador de eventos de change .
document.querySelector('select').addEventListener('change',function(e){ /* create an array from the nodelist of all `.pricing-btn` div nodes */ let col=[...document.querySelectorAll('.pricing-btn')]; /* remove the visibility class from ALL nodes in array/nodelist */ col.forEach(div=>div.classList.remove('viz')); /* process some of the array until the selected option index matches the array index. Add the visibility class when matched and exit `some` iterator */ col.some((div,i)=>{ if( i === this.options.selectedIndex - 1 ){ div.classList.add('viz'); return true; } }); }); .pricing-btn{display:none;} .viz{display:block;} <select> <option selected hidden disabled>Please select <option>monthly <option>annually <option>triennially </select> <div class="pricing-btn"> <a href="?bttn=1" class="btn viz"> Get started</a> </div> <div class="pricing-btn"> <a href="?bttn=2" class="btn"> Get started</a> </div> <div class="pricing-btn"> <a href="?bttn=3" class="btn"> Get started</a> </div>