addeventlistener单击“不在<option>中运行”<option>标记

Question

我正在创建一张地图，我用<select>和<option>标签创建了国家列表，而在<option>标签中，我将<a>标签放置在我们有国家名称的地方。

我用了以下代码，

当我将国家作为一个列表显示时，addeventlistener('click')工作得很好，但当我将国家作为选择和选项标签放置时，它就不起作用了。

注意:我尝试将change放在<select>标记上，但是它运行整个循环的函数，而不仅仅是针对所选的选项。

请帮助我，我应该如何让addeventlistener("click")在<a>标签中工作

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);
});

Answer 1

选项元素不应该包含其他元素。

允许含量：文本，可能带有转义字符(如é)。

它应该有一个value属性和一些文本。

按照原来的想法，将事件侦听器添加到select元素中，然后，与前面一样，只添加它的选项。当选择更改时，调用一个函数来显示所选选项的国家值。

​

const countryList=["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & 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 & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor LEste","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & 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>

​