如何预先选择在Material Design Lite中动态加载的Select中的值？

Question

我在MDL中构建应用程序，我在选择动态选择值时遇到问题，我正在使用此插件：

http://creativeit.github.io/getmdl-select/

这是我尝试过的一个例子，我的一个想法是它不起作用，我试图选择值并再次升级，但它没有用。如果您预先定义了该值，它将会起作用，遗憾的是我从数据库中获取了一个值，并且在完全加载并且服务为我提供结果之前我无法预定义它。

$($('.mdl-menu__item')[1]).data("selected", "true");
componentHandler.upgradeAllRegistered();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/getmdl-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/getmdl-select.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<!-- Simple Select -->
<div class="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="" class="mdl-textfield__input" id="sample1" readonly>
  <input type="hidden" value="" name="sample1">
  <label for="sample1" class="mdl-textfield__label">Country</label>
  <ul for="sample1" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-menu__item" data-val="DEU">Germany</li>
    <li class="mdl-menu__item" data-val="BLR">Belarus</li>
    <li class="mdl-menu__item" data-val="RUS">Russia</li>
  </ul>
</div>

<!-- Simple Select -->
<div class="mdl-textfield mdl-js-textfield getmdl-select">
  <input type="text" value="" class="mdl-textfield__input" id="sample2" readonly>
  <input type="hidden" value="" name="sample2">
  <label for="sample2" class="mdl-textfield__label">Country</label>
  <ul for="sample2" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <li class="mdl-menu__item" data-val="DEU" data-selected="true">Germany</li>
    <li class="mdl-menu__item" data-val="BLR">Belarus</li>
    <li class="mdl-menu__item" data-val="RUS">Russia</li>
  </ul>
</div>

有没有想过是否可以动态加载它？谢谢。

Answer 1

我在Reddit得到了答案：qazxsw poi

解决方案有效，需要进行更改：

1. 要向主Div添加ID。
2. 重新启动Div。

这是工作的例子。

https://www.reddit.com/r/javascript/comments/b1furp/how_to_preselect_a_value_in_a_select_that_is/

$('.mdl-menu__item').eq(1).attr("data-selected", "true");
getmdlSelect.init('#test');
componentHandler.upgradeAllRegistered();