CODEWITHSUNDEEP
javascripthtmlcss
RochaCarter07
RochaCarter07

Reputation: 97

Select options dropdown not working on chrome

I have a select list of options that change the content according to the selection. It works fine in MS Edge, IE, and on FireFox except in Chrome. Maybe I am missing something, below are all my code:

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>

Upvotes: 3

Views: 979

Answers (2)

Zarna Borda
Zarna Borda

Reputation: 735

You should not use the onClick Event within option Elements. Use the onChange event of the select instead. Try to take selected value using an event. Try this code. This will work fine in chrome also.

<body>
<select class="tab" onchange="openCity(event)">
    <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>
</body>

function openCity(evt) {
        var cityName = evt.target.value;
        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";
   }

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19111

You shouldn't attach click events directly to <option>s. The way you get the selected option is by listening for the change event on the <select>.

After the change, this in your openCity function, refers to the <select>. I'm getting the selected text like this:

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

These values match up with the ids of your .tabcontent <div>s. Then we show the content.

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


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

function openCity(evt) {
  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(
    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

Upvotes: 2

Related Questions