mdc-select вариант выбора через JS

У меня есть xml, поступающий с сервера sql, который отображается моим XSL-скриптом. Я использую последнюю версию Material Components для Интернета, и проблема заключается в том, что я не могу установить параметры в меню выбора через JS. Вот мой mdc-выбор:

<div id="bridgeSizeSelect" name="bridgeSize" class="mdc-select" role="listbox" data-mdc-auto-init="MDCSelect" style="width:22%;">
                                <div class="mdc-select__surface mdc-ripple-upgraded" tabindex="0" style="width: 141px; --mdc-ripple-fg-size:100.2px; --mdc-ripple-fg-scale:1.8576761430946644;">
                                  <div class="mdc-select__label">Bridge Size</div>
                                  <div class="mdc-select__selected-text"></div>
                                  <div class="mdc-select__bottom-line"></div>
                                </div>
                                <div class="mdc-menu mdc-select__menu">
                                  <ul class="mdc-list mdc-menu__items">
                                    <li class="mdc-list-item" role="option" id="XS" tabindex="0">
                                      XS: &lt;28 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="S" tabindex="0">
                                      S: 28-35 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="M" tabindex="0">
                                      M: 36-41 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="ML" tabindex="0">
                                      ML: 42-50 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="L" tabindex="0">
                                      L: 51-58 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="XL" tabindex="0">
                                      XL: 59-70 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="XXL" tabindex="0">
                                      XXL: 71-80 feet
                                    </li>
                                    <li class="mdc-list-item" role="option" id="XXXL" tabindex="0">
                                      XXXL: &gt;80 feet
                                    </li>                                                   
                                  </ul>
                                </div>
                            </div>

Я пробовал использовать следующий JS:

const select = new mdc.select.MDCSelect(document.querySelector("#bridgeSizeSelect"));
select.value="<xsl:value-of select="Bridge_Size"/>";

где xsl:value-of select="Bridge_Size" может принимать такие значения, как "XS", "S" и т. д., но ничего не происходит.

Я также пробовал:

$("#bridgeSizeSelect").value="<xsl:value-of select="Bridge_Size"/>";

так как мой выбор инициализируется, когда я загружаю страницу, но снова ничего не происходит. Наконец, я попробовал:

var bridgeSelect=document.querySelector("#bridgeSizeSelect");
            var bridgeSelectInit = new mdc.select.MDCSelect(bridgeSelect);
            bridgeSelectInit.value="<xsl:value-of select="Bridge_Size"/>";

без везения. Любая помощь будет принята с благодарностью!