将动态值设置为mdl select时出现问题

Question

页面加载后，我需要为此设置JSON值

$('#sample1').val('RUS')

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script defer src="http://creativeit.github.io/getmdl-select/getmdl-select.min.js"></script>



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

为什么不起作用？

尝试添加选择值。