JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"
></script>
<div class="delivery-select one-whole text-center">
  <form>
    <label for="country">Deliver to</label>
    <select id="country" name="country">
      <!--<option value="0">Change</option>-->
      <option value="country1" name="country1" selected>United Kingdom</option>
      <option value="country2" name="country2">Jamaica</option>
    </select>
  </form>
</div>
<hr>
<div class="rte">
  <div id="deliverycountry1" class="box">
  Delivering to the UK
  </div>
  <div id="deliverycountry2" class="box">
  Delivering to Jamaica
  </div>
</div>

JavaScript

-+*$(function () {
    $('#country').change(function() {
        console.log('change');
        $('.box').hide();
        if( Cookies ) {
            Cookies.set('deliveryOption', $(this).val());
        }
        $('#delivery' + $(this).val()).show().siblings().hide();
    });
		// On page load, read out the cookie, and select the corresponding country
    // If no cookie, take country1 as default
    var country = Cookies && Cookies.get('deliveryOption') || 'country1';
    $('#country').val(country).trigger('change');
})