Can someone help me modify the value of the ‘Filters By’ dropdowns on this page – cboe.com. The structure of the HTML is shown below. I would like to select the value ‘All’ in each dropdown.
It is possible to find the dropdown and modify the value with the simple Javascript below, but when the ‘View Chain’ button is then clicked the change has no effect (the Total Records count stays the same).
var test = document.getElementsByClassName("ReactSelect__single-value css-1dimb5e-singleValue");
test[2].innerHTML = "All";
// test[2].value = 0;
test[2].click();
From inspecting & debugging the page I see many scripts running and this then goes way beyond my level of experience. Any help gratefully received.
<div class="Select-cui__sc-1dwep2c-0 esxuzG css-b62m3t-container">
<span id="react-select-4-live-region" class="css-7pg0cj-a11yText"></span>
<span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"></span>
<div class="ReactSelect__control css-13cymwt-control">
<div class="ReactSelect__value-container ReactSelect__value-container--has-value css-hlgwow">
<div class="ReactSelect__single-value css-1dimb5e-singleValue">All</div>
<div class="ReactSelect__input-container css-19bb58m" data-value="">
<input class="ReactSelect__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="select_5" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-required="false" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;">
</div>
</div>
<div class="ReactSelect__indicators css-1wy0on6">
<span class="ReactSelect__indicator-separator css-1u9des2-indicatorSeparator"></span>
<div class="ReactSelect__indicator ReactSelect__dropdown-indicator css-1xc3v61-indicatorContainer" aria-hidden="true">
<svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
</svg>
</div>
</div>
</div>
</div>