option触发事件

实现select指定option选中触发事件

有时候我们需要对下拉列表select中的option添加事件，但实际上option是没有触发事件的，那怎么办呢？
但是，select是有触发事件的，我们可以利用他的触发事件来间接的给option添加触发事件

解决方案

• 代码实现

  <select name="" id="sel">
      <option value="a" name="beijing">北京</option>
      <option value="b" name="shanghai">上海</option>
      <option value="c" name="wuhan">武汉</option>
  </select>
  <script>
      var select = document.getElementById("sel");
      select.onchange = function(){
          console.log("点击了第" + select.selectedIndex + 1 + "选项");
          console.log("这个选项的内容是" + select.options[select.selectedIndex].innerHTML);
      }
  </script>

  运行结果如图：
  

---

• 分析
  我们通过给select添加onchange事件，当我们选择(点击)某一项时，也就触发了这个事件，接下来我们通过select.selectedIndex获得到了被选择的选项，然后就可以对被选择的项进行操作；看起来就像是option的事件，实际上是在select上添加的onchange事件。

• 深入
  看一看这些属性

  <select name="" id="sel">
      <option value="a" name="beijing">北京</option>
      <option value="b" name="shanghai">上海</option>
      <option value="c" name="wuhan">武汉</option>
  </select>
  <script>
      var select = document.getElementById("sel");
      console.log(select.options);
      console.log(select.options[0]);
      console.log(select.options[0].innerHTML);
      console.log(select.options[0].value);
  
      select.onchange = function(){
          //输出当前点击元素的下标
          console.log(select.selectedIndex);
      }
  </script>

  运行结果如图：
  

---