JavaScript下拉菜单动态获取value值

我想做一个功能，通过下拉菜单选项控制多个复选框显示隐藏。思路是用JavaScript声明变量获取选项的value值，再通过PHP调用这个变量进入数据库筛选。但是现在问题出现在我的document.write不能随着我选项value值变化而变化，只输出默认选项值，但在控制台输出是可以看到变量在变化的。请问我该怎么调整，多谢！
代码如下：

<select class="form-control" id="sift">
 <option value="9">全部视频option>
 <option value="RZ" selected>入职培训option>
 <option value="2">售前培训option>
 <option value="3">技术讲解option>
 <option value="4">产品培训option>
 <option value="5">FMS培训option>
 <option value="6">质量管理option>
 <option value="7">销售策略option>
 <option value="8">标准规范option>
select>
<button type="button" onclick="GetSelectedValue()">Get Selected Valuebutton>
<script type="text/javascript">
 var e,result;
 function GetSelectedValue(){
  e = document.getElementById("sift");
  result = e.options[e.selectedIndex].value;
  console.log(typeof result);
  console.log(result);
  return result;
 }
 GetSelectedValue()
 document.write(result);
script>

• 这篇文章：JavaScript下拉菜单案例 也许有你想要的答案，你可以看看

    <select class="form-control" id="sift">
     <option value="9">全部视频</option>
     <option value="RZ" selected>入职培训</option>
     <option value="2">售前培训</option>
     <option value="3">技术讲解</option>
     <option value="4">产品培训</option>
     <option value="5">FMS培训</option>
     <option value="6">质量管理</option>
     <option value="7">销售策略</option>
     <option value="8">标准规范</option>
    </select>
    <button type="button" onclick="WriteSelectValue()">Get Selected Value</button>
    <div id="writeplace">
        
    </div>
    <script type="text/javascript">
    function WriteSelectValue(){
        var e,result;
        function GetSelectedValue(){
         e = document.getElementById("sift");
         result = e.options[e.selectedIndex].value;
         console.log(typeof result);
         console.log(result);
         return result;
        }
        GetSelectedValue()
        document.getElementById('writeplace').innerHTML = result;
    }

    </script>