использование getmdl-select с двумя списками очищает первый список при выборе второго

Question

У меня два раскрывающихся списка, определенных таким образом:

    <main class="mdl-layout__content" id="mainDiv">
        <div class="mdl-grid" id="HomePage" style="padding-left:50px; padding-top:50px; ">
            <div class="mdl-cell mdl-cell--4-col">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
                    <input class="mdl-textfield__input" value="" id="specialitydd" readonly />
                    <input value="" type="hidden" name="speciality" />
                    <label class="mdl-textfield__label" for="specialitydd">Speciality</label>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu" for="speciality" id="specialityList" style="max-height:400px; overflow: auto;">

                    </ul>
                </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select">
                    <input class="mdl-textfield__input" value="" id="servicedd" readonly />
                    <input value="" type="hidden" name="service" />
                    <label class="mdl-textfield__label" for="servicedd">Service</label>
                    <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu servicelist" for="service" id="serviceList" style="max-height:400px; overflow: auto;">
                        <li class="mdl-menu__item" data-val="BLR">Service #1</li>
                        <li class="mdl-menu__item" data-val="BRA">Service #2</li>
                        <li class="mdl-menu__item" data-val="FRA">Service #3</li>
                    </ul>
                </div>
            </div>
       </div>
    </main>

Первый заполняется, когда пользователь входит на страницу и предоставляет список специальностей; когда это выбрано, второй список должен быть заполнен списком услуг.

До сих пор это работает нормально, второй список заполняется ожидаемыми службами

Однако, когда я выбираю из второго списка, следующий вызов также очищает текст первого списка.

getmdlSelect.init('.getmdl-select');

Две функции, которые заполняют списки:

Заполнение списка специальностей

           var parent = $('#specialityList');                
            parent.empty();

            if (result.length > 0)
            {

                result.forEach(function (el) {
                    // create element
                    var li = document.createElement('li');

                    // create data-val attribute
                    var val = document.createAttribute('data-val');
                    val.value = el.SpecialityCode;
                    li.setAttributeNode(val);

                    // set the class of the element
                    li.className = 'mdl-menu__item';

                    // set the inner text (menu text)
                    var txt = document.createTextNode(el.Name);
                    li.appendChild(txt);

                    $('#specialityList').append(li);
                });
            }


            getmdlSelect.init('.getmdl-select');
            componentHandler.upgradeAllRegistered();

Заполнение служб list

            url: uri,
            contentType: 'json',
            success: function (result) {
                var parent = $('#serviceList');
                srvice.empty();

                if (result.length > 0)
                {
                    result.forEach(function (el) {
                        var li  = document.createElement('li');
                        var val = document.createAttribute('data-val');
                        var txt = document.createTextNode(el.ServiceName);

                        val.value = el.ServiceId;

                        li.setAttributeNode(val);
                        li.className = 'mdl-menu__item'
                        li.appendChild(txt);

                        $('#serviceList').append(li);
                    });


                    getmdlSelect.init('.getmdl-select');
                    componentHandler.upgradeAllRegistered();

                }
                else {
                    console.log('Nothing found');
                }

Так, как я могу гарантировать, что первое текстовое поле не очищается при обновлении содержимого второго.