Javascript on Change 不适用于 [object html select element]

Question

这是我迄今为止尝试过的:

var getJqInputs = function(html) {
  var el = document.createElement('div');
  el.innerHTML = html;
  return el.childNodes[0];
}
alert(getJqInputs(document.getElementById("select").outerHTML));
/*getJqInputs(document.getElementById("select").outerHTML).addEventListener("change", function(){
    alert("sd");   
});*/
getJqInputs(document.getElementById("select").outerHTML).onchange = function() {
  alert("dhhj");
};

<select id="select">
  <option id="someid" name="1" class="someclass">Subhan</option>
  <option id="someid" name="2" class="someclass">Subhan</option>
  <option id="someid" name="3" class="someclass">Subhan</option>
  <option id="someid" name="4" class="someclass">Subhan</option>
  <option id="someid" name="5" class="someclass">Subhan</option>
  <option id="someid" name="6" class="someclass">Subhan</option>
  <option id="someid" name="7" class="someclass">Subhan</option>
  <option id="someid" name="8" class="someclass">Subhan</option>
  <option id="someid" name="9" class="someclass">Subhan</option>
  <option id="someid" name="20" class="someclass">Subhan</option>
  <option id="someid" name="23" class="someclass">Subhan</option>
</select>

我的实际场景中只有文本，我从中获取一个 dom 对象，然后尝试在其上添加更改事件。我的目的是获取所选每个选项的名称属性，但没有运气

虽然JQuery更简单，但是，我只能使用Javascript。

我有一个想法，将 here 中的 html 字符串转换为 DOM

我的问题是当您有 HTMLSelectElement 对象时如何添加更改事件？ (不是从 id 或 class 获取)

Answer 1

这里有很多额外的、不需要的代码。您只需要在列表更改时找到所选选项，并按名称拉取其属性值即可:

document.getElementById("select").addEventListener('change', function() {
    alert(this.options[this.selectedIndex].getAttribute('name'));
});

<select id="select">
  <option id="someid" name="1" class="someclass">Subhan</option>
  <option id="someid" name="2" class="someclass">Subhan</option>
  <option id="someid" name="3" class="someclass">Subhan</option>
  <option id="someid" name="4" class="someclass">Subhan</option>
  <option id="someid" name="5" class="someclass">Subhan</option>
  <option id="someid" name="6" class="someclass">Subhan</option>
  <option id="someid" name="7" class="someclass">Subhan</option>
  <option id="someid" name="8" class="someclass">Subhan</option>
  <option id="someid" name="9" class="someclass">Subhan</option>
  <option id="someid" name="20" class="someclass">Subhan</option>
  <option id="someid" name="23" class="someclass">Subhan</option>
</select>