To achieve this, you can utilize the selectedIndex property if the buttons' index corresponds to the options' index (refer to option 1 - selectOptionByIndex).
Alternatively, assign value attributes to the buttons that match the values of the options (option 2 - selectOptionByValue).
Check out the live demonstration:
https://stackblitz.com/edit/typescript-r4vuzj
document.querySelectorAll('button').forEach((item, index) => {
item.addEventListener('click', event => {
var value = item.getAttribute("value");
selectOptionByIndex(index); // option 1
selectOptionByValue(value); // option 2
})
})
function selectOptionByIndex(index) {
var select = (document.getElementById('mySelect')) as HTMLSelectElement;
select.selectedIndex = index;
}
function selectOptionByValue(value) {
var select = (document.getElementById('mySelect')) as HTMLSelectElement;
select.value = value;
}
If you opt for the second approach - selecting by value - ensure to include the same value attribute in the buttons like so:
<select id="mySelect" class="aa" required="" name="f1990" {input.multiple}="" {input.size}="" id="f1990" placeholder="" data-required="true">
<option value="897"& gt;Athens - 5 days / 4 nights - Total Tax: $132.44</option>
<option value="896">Atlanta - 4 days / 3 nights - Total Tax: $99.75</option>
<option value="895">Atlantic City - 4 days / 3 nights - Total Tax: $89.10</option>
<option value="894">Bali - 8 days / 7 nights - Total Tax: $196.84</option>
</select>
<br>
<button id="1" value="897" name="btn"> Redeem </button>
<button id="2" value="896" name="btn"> Redeem </button>
<button id="3" value="895" name="btn"> Redeem </button>
<button id="4" value="894" name="btn"> Redeem </button>