JSFiddle - React, Tailwind, and code Playground

by Chris danaskos

HTML

Πόλη Φοίτησης:
<br>
<select class="poli" id="poli" name="poli">
    <option value="">Επιλέξτε</option>
    <option id="poli_opt" value="ΑΓ. ΝΙΚΟΛΑΟΣ ΚΡΗΤΗΣ">ΑΓ. ΝΙΚΟΛΑΟΣ ΚΡΗΤΗΣ</option>
    <option id="poli_opt" value="ΑΓΡΙΝΙΟ">ΑΓΡΙΝΙΟ</option>
    <option id="poli_opt" value="ΑΘΗΝΑ">ΑΘΗΝΑ</option>
    <option id="poli_opt" value="ΑΙΓΙΟ">ΑΙΓΙΟ</option>
    <option id="poli_opt" value="ΑΛΕΞΑΝΔΡΟΥΠΟΛΗ">ΑΛΕΞΑΝΔΡΟΥΠΟΛΗ</option>
    <option id="poli_opt" value="ΑΜΑΛΙΑΔΑ">ΑΜΑΛΙΑΔΑ</option>
    <option id="poli_opt" value="ΑΜΦΙΣΣΑ">ΑΜΦΙΣΣΑ</option>
    <option id="poli_opt" value="ΑΡΓΟΣΤΟΛΙ">ΑΡΓΟΣΤΟΛΙ</option>
    <option id="poli_opt" value="ΑΡΤΑ">ΑΡΤΑ</option>
    <option id="poli_opt" value="ΒΟΛΟΣ">ΒΟΛΟΣ</option>
    <option id="poli_opt" value="ΓΡΕΒΕΝΑ">ΓΡΕΒΕΝΑ</option>
    <option id="poli_opt" value="ΔΙΔΥΜΟΤΕΙΧΟ">ΔΙΔΥΜΟΤΕΙΧΟ</option>
    <option id="poli_opt" value="ΔΡΑΜΑ">ΔΡΑΜΑ</option>
    <option id="poli_opt" value="ΖΑΚΥΝΘΟΣ">ΖΑΚΥΝΘΟΣ</option>
    <option id="poli_opt" value="ΗΓΟΥΜΕΝΙΤΣΑ">ΗΓΟΥΜΕΝΙΤΣΑ</option>
    <option id="poli_opt" value="ΗΡΑΚΛΕΙΟ">ΗΡΑΚΛΕΙΟ</option>
    <option id="poli_opt" value="ΘΕΣΣΑΛΟΝΙΚΗ">ΘΕΣΣΑΛΟΝΙΚΗ</option>
    <option id="poli_opt" value="ΘΗΒΑ">ΘΗΒΑ</option>
    <option id="poli_opt" value="ΚΑΒΑΛΑ">ΚΑΒΑΛΑ</option>
    <option id="poli_opt" value="ΚΑΛΑΜΑΤΑ">ΚΑΛΑΜΑΤΑ</option>
    <option id="poli_opt" value="ΚΑΡΔΙΤΣΑ">ΚΑΡΔΙΤΣΑ</option>
    <option id="poli_opt" value="ΚΑΡΠΕΝΗΣΙ">ΚΑΡΠΕΝΗΣΙ</option>
    <option id="poli_opt" value="ΚΑΣΤΟΡΙΑ">ΚΑΣΤΟΡΙΑ</option>
    <option id="poli_opt" value="ΚΑΤΕΡΙΝΗ">ΚΑΤΕΡΙΝΗ</option>
    <option id="poli_opt" value="ΚΕΡΚΥΡΑ">ΚΕΡΚΥΡΑ</option>
    <option id="poli_opt" value="ΚΙΛΚΙΣ">ΚΙΛΚΙΣ</option>
    <option id="poli_opt" value="ΚΟΖΑΝΗ">ΚΟΖΑΝΗ</option>
    <option id="poli_opt" value="ΚΟΜΟΤΗΝΗ">ΚΟΜΟΤΗΝΗ</option>
    <option id="poli_opt" value="ΚΟΡΙΝΘΟΣ">ΚΟΡΙΝΘΟΣ</option>
    <option id="poli_opt" value="ΚΥΠΡΟΣ">ΚΥΠΡΟΣ</option>
    <option id="poli_opt" value="ΛΑΜΙΑ">ΛΑΜΙΑ</option>
    <option...

JavaScript

$(document).ready(function () {
    $('.poli').change(function () {
        var str2 = $(".poli option:selected").text();

        $('#sxoli option').each(function () {

            if ($(this).hasClass(str2) || $(this).hasClass("all")) {
                $(this).removeAttr('hidden');

                $(this).removeAttr('disabled');

            } else {
                $(this).attr('disabled', 'disabled');
                $(this).attr('hidden', 'hidden');

            }

        });


    });
});