如何在HTML选择中找到所选选项的ID？

Question

我希望在我的HTMl select元素中找到所选选项的ID。但是在控制台中，我一直看到一个空行，不是未定义的，也不是错误。有人知道怎么解决这个问题吗？

​

  var getSelect = document.querySelectorAll('.custom-select');
  
  getSelect.forEach(function(option) {
  option.addEventListener('change', function(e) {
    var target = e.target.id;
    console.log(target);
  })
 });

  <select class="custom-select" name="category">
  <option id="option-1" class="cat-option" value="Coronavirus">Coronavirus</option>
  <option id="option-2" class="cat-option" value="Reserveren">Reserveren</option>
  <option id="option-3" class="cat-option" value="Prijzen en toeslagen">Prijzen en toeslagen</option>
  <option id="option-4" class="cat-option" value="Speciale wensen en extra's">Speciale wensen en extra's</option>
  <option id="option-5" class="cat-option" value="Betalen">Betalen</option>
  <option id="option-6" class="cat-option" value="Wijzigen of annuleren">Wijzigen of annuleren</option>
  <option id="option-7" class="cat-option" value="Buitenland">Buitenland</option>
  <option id="option-8" class="cat-option" value="Air Miles">Air Miles</option>
  <option id="option-9" class="cat-option" value="Na uw verblijf">Na uw verblijf</option>
  </select>

​

Answer 1

您可以尝试使用e.target.options[e.target.selectedIndex].id

​

  var getSelect = document.querySelectorAll('.custom-select');
  
  getSelect.forEach(function(option) {
  option.addEventListener('change', function(e) {
    var target = e.target.id;
    console.log(e.target.options[e.target.selectedIndex].id);
  })
 });

  <select class="custom-select" name="category">
  <option id="option-1" class="cat-option" value="Coronavirus">Coronavirus</option>
  <option id="option-2" class="cat-option" value="Reserveren">Reserveren</option>
  <option id="option-3" class="cat-option" value="Prijzen en toeslagen">Prijzen en toeslagen</option>
  <option id="option-4" class="cat-option" value="Speciale wensen en extra's">Speciale wensen en extra's</option>
  <option id="option-5" class="cat-option" value="Betalen">Betalen</option>
  <option id="option-6" class="cat-option" value="Wijzigen of annuleren">Wijzigen of annuleren</option>
  <option id="option-7" class="cat-option" value="Buitenland">Buitenland</option>
  <option id="option-8" class="cat-option" value="Air Miles">Air Miles</option>
  <option id="option-9" class="cat-option" value="Na uw verblijf">Na uw verblijf</option>
  </select>

​