如何在 Material Design Lite 中动态加载的 Select 中预先 select 一个值？

Question

我正在使用 MDL 构建应用程序，但在 select 从 select 动态获取值时遇到问题，我正在使用此插件：

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

这是我尝试过的示例，也是我认为它不起作用的想法之一，我尝试 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/getmdl-select@2.0.1/getmdl-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/getmdl-select@2.0.1/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

我在 Redit 中得到了答案： https://www.reddit.com/r/javascript/comments/b1furp/how_to_preselect_a_value_in_a_select_that_is/

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

添加一个ID到主Div。
重新初始化 Div。

这是有效的示例。

$('.mdl-menu__item').eq(1).attr("data-selected", "true");
getmdlSelect.init('#test');
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/getmdl-select@2.0.1/getmdl-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/getmdl-select@2.0.1/getmdl-select.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<!-- Simple Select -->
<div id="test" 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>

如何在 Material Design Lite 中动态加载的 Select 中预先 select 一个值？

How to pre-select a value in a Select that is dynamically loaded in Material Design Lite?

javascript

jquery

html-select

material-design-lite