在onchange事件上设置innerHTML后div消失了

Question

我试图在数据库的第二个下拉列表中显示选项，具体取决于在第一个下拉列表中选择的选项。我已完成了我的中途。我正在通过javascript中的onchange事件发送xmlhttp请求。但问题是当我从第一个下拉列表中选择选项时，第二个div包括第二个下拉列表获取消失。下面是我试过的代码：

<select id="field" onchange="change_field();">
  <option>Option1</option>
  <option>Option2</option>
  <option>Option3</option>
  <option>Option4</option>
</select>

<div class="input-field col s2" id="branch">
    <select>
        <option value="" disabled selected>Choose branch</option>
    </select>
    <label>Select Branch</label>
</div>

JS Onchange功能：

<script type="text/javascript">
        function change_field()
        {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET","get_branch?field="+document.getElementById("field").value,false);
            xmlhttp.send(null);
            alert(xmlhttp.responseText);
            document.getElementById("branch").innerHTML = xmlhttp.responseText;
        }
    </script>

在这里，我希望看到的完美输出显示在alert();所以，我怎么能停止消除div / second下拉列表。