如何动态获取select下拉框的value值(反复排雷之后的做法，亲测有效哦)

需求：

点击一个option，可以获取对应的value值。

效果：

代码如下：

这里重点是确定在什么时候获得indexs，我选择的是当select的值发生改变的时候。

 我爱
  <select id="select">
    <option>老公</option>
    <option>宝贝</option>
    <option>猪猪</option>
    <option>小可耐</option>
  </select>
  <script>
    var selects = document.getElementById("select");
    selects.onchange = function () {
     
      var indexs = selects.selectedIndex;  //选中项的索引
      console.log(selects.options[indexs].value);
    }
   </script>

踩雷：

1.这个方法始终获取到的是第一个option的索引，而且不会变。

  我爱
  <select id="select">
    <option>老公</option>
    <option>宝贝</option>
    <option>猪猪</option>
    <option>小可耐</option>
  </select>
  <script>
  var indexs = selects.selectedIndex;  //选中项的索引
  console.log(selects.options[indexs].value);
  </script>

这里我是用了一个延迟来看出问题的：这样会在还没到时间之前点击option来获取对应value

 我爱
  <select id="select">
    <option>老公</option>
    <option>宝贝</option>
    <option>猪猪</option>
    <option>小可耐</option>
  </select>
  <script>
  setTimeout(() => {
     
             var indexs = selects.selectedIndex;  //选中项的索引
             console.log(selects.options[indexs].value);
             console.log(selects.options[indexs].text);
           }, 6000)
  </script>

2.使用onclick触发事件，这样也是一直输出第一个

我爱
  <select id="select">
    <option>老公</option>
    <option>宝贝</option>
    <option>猪猪</option>
    <option>小可耐</option>
  </select>
  <script>
    var selects = document.getElementById("select");
    selects.onclick = function () {
     
      var indexs = selects.selectedIndex;  //选中项的索引
      console.log(selects.options[indexs].value);
    }
   </script>