CODEWITHSUNDEEP
javascript
gauravK
gauravK

Reputation: 197

why is addEventListener not working on datalist?

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 .

Upvotes: 2

Views: 1570

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115272

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>

Upvotes: 3

Related Questions