如何在 mdl 菜单中显示动态值 select

Question

我试图在编辑选项的 mdl select 值中显示从服务器获取的动态值。我正在使用 jquery .val() 来填充输入标签的值。 select 菜单中甚至没有显示数据。谁能帮我做一下？

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

<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");

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

如何在 mdl 菜单中显示动态值 select

How to display dynamic value in mdl menu select

javascript

jquery

material-design-lite