My html code
<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>
When monthly option is selected div with $ButtonLink1 should be visible.
When annually option is selected div with $ButtonLink2 should be visible.
When triennially option is selected div with $ButtonLink3 should be visible.
Default visible value should be monthly option and div with $ButtonLink1.
Can anyone please tell me how to write script to achieve this?
I think that u need something like this, this code add an event on select, this event get the name of button that u need and show.
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>With barely any changes to the HTML you can easily do this by comparing the selectedIndex of the option in the select menu to the index within the nodelist returned by querying the DOM for all nodes with class pricing-btn. To ensure that these pricing-btn elements are hidden by default except the first set their css display property to none and assign a visibility class within the change event handler.
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>