JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<select name="bookFrom" id="bookFrom">
    <optgroup label="Transport Hubs">
        <option value="1">Faro Airport</option>
        <option value="2">Faro Train Station</option>
        <option value="3">Faro Bus Station</option>
    </optgroup>
    <optgroup label="Local Destinations">
        <option value="101">Albufeira</option>
        <option value="102">Acoteias</option>
        <option value="103">Aljezur</option>
        <option value="104">Alvor</option>
        <option value="105">Armacao de Pera</option>
        <option value="106">Burgau</option>
        <option value="107">Cabanas de Tavira</option>
        <option value="108">Carvoeiro</option>
        <option value="109">Castro Marim</option>
        <option value="110">Faro / Estoi / Olhao</option>
        <option value="111">Ferragudo</option>
        <option value="112">Gale / Guia</option>
        <option value="113">Lagoa</option>
        <option value="114">Lagos</option>
        <option value="115">Lisbon (area)</option>
        <option value="116">Loule</option>
        <option value="117">Manta Rota</option>
        <option value="118">Monchique</option>
        <option value="119">Montegordo / Altura</option>
        <option value="120">Olhos de Agua</option>
        <option value="121">Oura (Praia)</option>
        <option value="122">Portimao</option>
        <option value="123">Praia da Luz</option>
        <option value="124">Praia da Rocha</option>
        <option value="125">Praia do Vau</option>
        <option value="126">Quarteira</option>
        <option value="127">Quinta do Lago</option>
        <option value="128">Sagres</option>
        <option value="129">Salema</option>
        <option value="130">Silves</option>
        <option value="131">Tavira</option>
        <option value="132">Vale do Lobo</option>
        <option value="133">Vilamoura</option>
        <option value="134">Vila Nova Mil Fontes</option>
    </optgroup>
</select>
<select data-validation="required"...

JavaScript

$( document ).ready(function() {
	$("select[name=bookFrom]").trigger('change');
});

$("select[name=bookFrom]").change(function () {
    var index = $(this).val(),
        originalOpt = $("#bookTo .optToLoc"),
        removedOpt = $(".hiddenSelect .optToLoc");
    $("select[name=bookTo] option").removeAttr('disabled');
    if (index < 100) {
        $("select[name=bookTo]").prepend(removedOpt.remove());
        $("select[name=bookTo] option[value=" + index + "]").attr('disabled', 'disabled');
    } else {
        if (!$(".hiddenSelect").length) {
            $("body").append("<select style='position:absolute;top:300px;left:75px;' class='hiddenSelect'><select>");
        }
        $('.hiddenSelect').append(originalOpt.remove());
        $("select[name=bookTo]").val("");
    }
});

$("select[name=bookTo]").change(function () {
	var index = $(this).val();
	$( "select[name=bookFrom] option" ).removeAttr('disabled');
	if (index < 100) {
		$( "select[name=bookFrom] option[value="+index+"]" ).attr('disabled', 'disabled');
	}
});