为什么addEventListener在数据列表上不起作用？

Question

HTML

<input type="text" list="countries" name="mycountry" />
<datalist id="countries">
  <option value="India">India</option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Germany">Germany</option>
  <option value="France">France</option>
</datalist>

JS

var a  = document.getElementById('countries') ;
a.addEventListener('change', function () {alert(this.value) ;} , false) ; 

I want when list's option will select than alert box show that value .

Answer 1

You need to bind listener to the input element

 var a = document.getElementsByName('mycountry')[0]; a.addEventListener('change', function() { alert(this.value); }); 

 <input type="text" list="countries" name="mycountry" /> <datalist id="countries"> <option value="India">India</option> <option value="United States">United States</option> <option value="United Kingdom">United Kingdom</option> <option value="Germany">Germany</option> <option value="France">France</option> </datalist>