Change dropdown option value via JS not working

Question

I am trying to change the dropdown option value at the end from "10 rows" to "50 rows". The code below changes value to "50 rows" but it does not trigger the corresponding data. It's being run manually but not via JS. URL is https://trendlyne.com/mutual-fund/nav/6309/icici-prudential-technology-fund-direct-plan-growth/

document.querySelector('.select-wrap select').getElementsByTagName('option')[4].selected = 'selected';

OR

document.querySelector(".select-wrap select").value='50'

Check this answer, it may be what you want: https://stackoverflow.com/questions/42944308/how-to-programmatically-click-select-element-and-trigger-onchange-handler — Iván, Sep 06 '21 at 16:53

score 1 · Accepted Answer · answered Sep 07 '21 at 09:03

trigger change event manually after selecting the value

document.querySelector('.select-wrap select').getElementsByTagName('option')[4].selected = true;
document.querySelector('.select-wrap select').dispatchEvent(new Event('change', {bubbles: true}));

Change dropdown option value via JS not working

1 Answers1