javascript-选择选项下拉菜单不适用于chrome

我有一个选择列表,这些列表根据选择更改内容.除Chrome以外,它在MS Edge,IE和FireFox上均可正常运行.也许我缺少一些东西,下面是我的所有代码：

function openCity(evt,cityName) {
  var i,tabcontent,tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active","");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab option {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab option:hover {
  background-color: #ddd;
}

.tab option.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<body>
  <select class="tab">
    <option value="london" class="tablinks" onclick="openCity(event,'London')">London</option>
    <option value="paris" class="tablinks" onclick="openCity(event,'Paris')">Paris</option>
  </select>

  <div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>
</body>

最佳答案

您不应将点击事件直接附加到< option> s.获得选定选项的方式是通过监听< select>上的change事件.

更改后,在openCity函数中,这是指< select>.我得到这样的选定文本：

  this.options[this.selectedIndex].text // Paris,London,etc.

这些值与您的.tabcontent< div> s的ID相匹配.然后我们显示内容.

  document.getElementById(
    this.options[this.selectedIndex].text
  ).style.display = "block";

document.querySelector('.tab').addEventListener('change',openCity);

function openCity(evt) {
  var i,"");
  }
  
  document.getElementById(
    this.options[this.selectedIndex].text
  ).style.display = "block";

  evt.currentTarget.className += " active";
}

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab option {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab option:hover {
  background-color: #ddd;
}

.tab option.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<select class="tab">
  <option value="london" class="tablinks">London</option>
  <option value="paris" class="tablinks">Paris</option>
</select>


<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

jsFiddle

javascript-选择选项下拉菜单不适用于chrome

猜你在找的HTML相关文章