JSFiddle - React, Tailwind, and code Playground

by Boyke Ferdinandes

HTML

<select name="branch" id="branch">
  <option value="0" city="NZ" zoom="6" lat="-37.90" long="174.00">All</option>
  <option value="1" city="Botany" zoom="6" lat="-36.930302" long="174.913765">Botany</option>
  <option value="2" city="Christchurch" zoom="6" lat="-43.538223" long="172.594659">Christchurch</option>
  <option value="3" city="Dunedin" zoom="6" lat="-45.884978" long="170.498893">Dunedin</option>
  <option value="4" city="Glenfield" zoom="6" lat="-36.766847" long="174.735331">Glenfield</option>
  <option value="5" city="Gisborne" zoom="6" lat="-38.653429" long="178.003728">Gisborne</option>
  <option value="6" city="Hamilton" zoom="6" lat="-37.742138" long="175.228517">Hamilton</option>
  <option value="7" city="Hastings" zoom="6" lat="-39.637736" long="176.839316">Hastings</option>
  <option value="8" city="Invercargill" zoom="6" lat="-46.414734" long="168.350088">Invercargill</option>
  <option value="8" city="Lower Hutt" zoom="6" lat="-41.204705" long="174.908913">Lower Hutt</option>
  <option value="10" city="Manukau" zoom="6" lat="-36.990192" long="174.867764">Manukau</option>
  <option value="11" city="New Plymouth" zoom="6" lat="-39.055357" long="174.083854">New Plymouth</option>
  <option value="12" city="Napier" zoom="6" lat="-39.48892" long="176.891301">Napier</option>
  <option value="13" city="Palmerston North" zoom="6" lat="-40.343172" long="175.603214">Palmerston North</option>
  <option value="14" city="Porirua" zoom="6" lat="-40.919451" long="175.005319">Porirua</option>
  <option value="15" city="Paraparaumu" zoom="6" lat="-41.130768" long="174.839587">Paraparaumu</option>
  <option value="16" city="Rotorua" zoom="6" lat="-38.128473" long="176.239509">Rotorua</option>
  <option value="17" city="Tauranga" zoom="6" lat="-37.714536" long="176.150784">Tauranga</option>
  <option value="18" city="Upper Hutt" zoom="6" lat="-41.125587" long="175.073971">Upper Hutt</option>
  <option value="19" city="Westage" zoom="6" lat="-36.822621"...

JavaScript

var select = document.getElementById('branch');
var show1 = document.getElementById('show1');
var show2 = document.getElementById('show2');
var show3 = document.getElementById('show3');
var show4 = document.getElementById('show4');
var show5 = document.getElementById('show5');

var city =

  select.onchange = function() {
    show1.innerHTML = select.value;
    show2.innerHTML = select.options[select.selectedIndex].getAttribute('city');
    show3.innerHTML = select.options[select.selectedIndex].getAttribute('lat');
    show4.innerHTML = select.options[select.selectedIndex].getAttribute('long');
    show5.innerHTML = select.options[select.selectedIndex].getAttribute('zoom');
  }