addeventlistener click not working on <a> tag inside <option>

Faraz Anwar 0
Viewed 41

I,m working on creating a map I created list of countries using <select> and <option> tags and inside <option> tag I placed <a> tag where we have the name of country.

I'm using the following code,

the addeventlistener('click') was working fine when I displayed the countries as a list but it is not working now when I placed the countries as select and option tag.

Note:I tried placing change on <select> tag but it runs the function for the whole loop and not just for just the selected option.

Kindly help me with that how should I get addeventlistener("click") to work on <a> tag inside option

countryList.forEach( country => {
    
    const option = document.createElement('option');
    const div    = document.createElement('div');
    const a      = document.createElement('a');
    const p      = document.createElement('p');

    // flying to the country on user click on country
    a.addEventListener('click', () => {  
        flyToStore(country);   
    });
             
    div.classList.add('country-item');
    countries   = country.properties.country;
    a.innerText = countries ;  
    a.href      = '#';
          
    div   .appendChild(a);
    option.appendChild(a);
    select.appendChild(option);
});
javascript html
1 Answers

Your option elements shouldn't contain additional elements.

Permitted content: Text, possibly with escaped characters (like é).

It should have a value attribute and some text.

Go with your original idea of adding the event listener to the select element, and then, as before, just add on its options. When the selection changes call a function to show the country value of the selected option.

const countryList=["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania","Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor LEste","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];

// Cache the select element and add a listener to it.
// The listener calls `handleChange` when the event is fired.
const select = document.querySelector('select');
select.addEventListener('change', handleChange);

// Show the value of the selection option
function handleChange(e) {
  console.log(e.target.value);
}

// Add a disabled option to the head of the list
const option = document.createElement('option');
option.textContent = 'Select a country';
option.disabled = true;
option.selected = true;
select.appendChild(option);

// Now iterate over the data adding _only_ the option
// to the select element and nothing more
countryList.forEach(country => {
  const option = document.createElement('option');
  option.classList.add('country-item');
  option.value = country;
  option.textContent = country;
  select.appendChild(option);
});
<select></select>

userkfM50
Related