如何在MDL菜单中选择显示动态值

问题描述

我正在尝试在编辑选项的mdl select值中显示从服务器获取的动态值。我正在使用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");

解决方法

您不需要设置输入的值。只是要触发右侧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>