mdc-select 通过 JS 选择选项

Question

我有一个来自 sql server 的 xml，它由我的 XSL 脚本呈现。我正在使用最新版本的 Web 材质组件，我遇到的问题是我似乎无法通过 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"/>";

没有运气。 任何帮助将不胜感激！

Answer 1

mdc-select 元素有几种方法可以设置选定的值。一种选择是通过将aria-selected 属性添加到要选择的html 元素来在初始化选择之前设置值。

https://codepen.io/williamernest/pen/xYabNq

另一个选项是使用selectedIndex 来指示在选择初始化后应该选择哪个值。

https://codepen.io/williamernest/pen/xYaboq

目前存在一个错误，如果预先选择一个选项，您必须将mdc-select__label--float-above 添加到标签中，但这应该很快就会修复。