时间戳

首页 > 解决方案 > 如何在 Material Design Lite 中动态加载的 Select 中预先选择一个值？

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

问题描述

我在 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>

知道是否可以动态加载它吗？谢谢。

标签： javascriptjqueryhtml-selectmaterial-design-lite

解决方案

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

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

  1. 向主 Div 添加一个 ID。
  2. 重新初始化分区。

这是示例工作。

$('.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>

推荐阅读