如何在 mdl 菜单选择中显示动态值答案

【问题标题】：How to display dynamic value in mdl menu select如何在 mdl 菜单选择中显示动态值
【发布时间】：2020-09-09 12:30:39
【问题描述】：

我试图在编辑选项的 mdl 选择值中显示从服务器获取的动态值。我正在使用 jquery .val() 来填充输入标签的值。怎么连数据都没有显示在选择菜单中。有人可以帮我做吗？

这是我用来显示选择菜单的代码：

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
  <input type="text" value="" class="mdl-textfield__input" id="estream" readonly>
  <input type="hidden" value="" name="stream" id="estream2">
  <i class="mdl-icon-toggle__label material-icons" style="color: #fff;">keyboard_arrow_down</i>
  <label for="estream" class="mdl-textfield__label">Select Stream                                                                                                            </label>
  <ul for="estream" class="mdl-menu mdl-menu--bottom-left mdl-js-menu">
    <?php                                   
      foreach ($streams as $row) {
    ?>
    <li class="mdl-menu__item" data-val="<?php echo $row->Name; ?>">
      <?php echo $row->Name; ?>
    </li>
    <?php   
      }
    ?>
  </ul>
</div>

这是我尝试使用 jQuery 更新值的方式：

$("#estream").val("lorem");

【问题讨论】：

标签： javascript jquery material-design-lite

【解决方案1】：

您不需要设置输入的值。只是为了触发右边的click()li。

document.querySelector('button').addEventListener('click', () => {
  const valueToSet = 'BLR';
  const itemToSelect = document.querySelector(`.getmdl-select li[data-val=${valueToSet}]`)
  itemToSelect.click();
  
  console.log(document.querySelector('[name=sample1]').value);
});

<link rel="stylesheet" href="https://creativeit.github.io/getmdl-select/lib/material.min.css" />
<link rel="stylesheet" href="https://creativeit.github.io/getmdl-select/getmdl-select.min.css" />

<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>
<script src="https://creativeit.github.io/getmdl-select/lib/material.min.js"></script>
<script src="https://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script>
<hr />
<button>Set selected</button>

【讨论】：