mdc-select 通过 JS 选择选项

Question

我有一个来自 sql 服务器的 xml，它由我的 XSL 脚本呈现。我正在使用最新版本的 Material Web 组件，我遇到的问题是我似乎无法通过 JS 在 select 菜单中设置选项。这是我的 mdc-select:

<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"/>";

因为我的 select 在我加载页面时被初始化，但再次没有任何反应。最后，我试过了：

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

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

Answer 1

mdc-select 元素有几种设置 selected 值的方法。一种选择是在初始化 select 之前设置值，方法是将 aria-selected 属性添加到您想要 select 的 html 元素。

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

另一种选择是使用 selectedIndex 来指示在 select 初始化后应 select 编辑哪个值。

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

目前存在一个错误，如果 pre-selecting 一个选项，您必须将 mdc-select__label--float-above 添加到标签，但应该很快修复。

mdc-select 通过 JS 选择选项

mdc-select choosing option via JS

javascript

material-components-web