JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<select class="js-redirect">
  <option vale="0"> Select Social Media... </option>
  <option value="https://google.co.uk">Google</option>
  <option value="https://twitter.com">Twitter</option>
  <option value="https://facebook.com">Facebook</option>
</select>

<select class="js-redirect">
  <option vale="0"> Select Shopping... </option>
  <option value="https://amazon.co.uk">Google</option>
  <option value="https://ebay.co.uk">Twitter</option>
</select>

JavaScript

(function() {
	// store the HTML element in a variable
	var redirect = document.querySelectorAll('.js-redirect');
   
  // function that gets the selected value and redirects the current URL
  function doRedirect() {
    var value = this.value;
    
  	if(value !== '0') {
    	// if the selected value is not 0, 
      // redirect
    	window.location.href = value;          
    }
  }
  
  // add an event listener to the HTML element 
  // that runs the desired function (do Redirect)
  // we use forEach to loop through all selectors 
  // so that we can apply the same function to multiple
  // elements (if we like!)
  [].forEach.call(redirect, function(el) {
  	el.addEventListener('change', doRedirect);
  });  
  
})();