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

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

要向主Div添加ID。
重新初始化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中预先选择一个值？

1 个答案: