JSFiddle - React, Tailwind, and code Playground

by VesQ

HTML

<form name="search" action="search.jsp" method="get">
    Avainsana: <input type="text" name="kword" />
    <br /> Organisaatio:
    <select name="org">
        <option value="" >--valitse organisaatio</option>
        <option value="CHEM">Kemian tekniikan korkeakoulu</option>
        <option value="ECON">Kauppakorkeakoulu</option>
        <option value="ELEC">Sähkötekniikan korkeakoulu</option>
        <option value="ENG">Insinööritieteiden korkeakoulu</option>
        <option value="ERI">Erillinen opetus</option>
        <option value="SCI">Perustieteiden korkeakoulu</option>
        <option value="TaiK">Taiteiden ja suunnittelun korkeakoulu</option>

    </select>
    <br /> Osasto:
    <select name="dept">
        <option value="" >--valitse osasto</option>
        <option data-org="CHEM" value="T1010">Biotekniikan ja kemian tekniikan laitos</option>
        <option data-org="CHEM" value="T1020">Kemian laitos</option>
        <option data-org="CHEM" value="T1030">Materiaalitekniikan laitos</option>
        <option data-org="CHEM" value="T1040">Puunjalostustekniikan laitos</option>
        <option data-org="CHEM" value="CHEM-0">Korkeakoulun yhteiset kurssit</option>
        <option data-org="CHEM" value="ECON-0">Korkeakoulun kurssit</option>
        <option data-org="ECON" value="T4010">Automaatio- ja systeemitekniikan laitos</option>
        <option data-org="ECON" value="T4020">Elektroniikan laitos</option>
        <option data-org="ECON" value="T4030">Mikro- ja nanotekniikan laitos</option>
        <option data-org="ECON" value="T4040">Radiotieteen ja -tekniikan laitos</option>
        <option data-org="ECON" value="T4050">Signaalinkäsittelyn ja akustiikan laitos</option>
        <option data-org="ECON" value="T4060">Sähkötekniikan laitos</option>
        <option data-org="ELEC" value="T4070">Tietoliikenne- ja tietoverkkotekniikan laitos</option>
        <option data-org="ELEC" value="T4080">Metsähovin radiotutkimusasema</option>
        <option...

JavaScript

// First of all, get a copy of all the <select name="dept"> options.
// This is because we must DELETE those <option> elements to truly
// make them hidden, and we'd like to be able to put those elements
// back, too.
var originalDepartments = $('select[name="dept"]').clone();

// Listen to "change" event for the wanted <select>
$('select[name="org"]').change(function () {
    // Store the value of selected organisation to a variable
    var chosenOrganisation = $(this).val();
    
    // We have a handy dandy debug-div where we can output something
    $("#debuginfo").html('<p>You chose: ' + chosenOrganisation + '</p>');
    
    // Replace the element of <select name="dept"> with the one
    // stored to originalDepartments-variable, i.e. reset the state.
    $('select[name="dept"]').replaceWith(originalDepartments.clone());
    
    // Loop through every element inside a <select> with name-attribute "dept"
    $('select[name="dept"] option').each(function () {
        // The current DOM-element is tied to 'this', let's turn it into a jQuery object
        var $this = $(this);
        
        // Get the data-org attribute to a variable here already.
        var dataOrg = $this.attr('data-org');
        
        // If the current data-org was empty, i.e. it wasn't an organisation,
        // don't do anything. Returning here means that this callback function
        // will exit and then it'll be called again by the each-function with
        // a new element as 'this'.
        if (!dataOrg) {
            return;
        }
        
        // Now, if the <option> has a data-attribute "data-org" that is
        // not of the same value as the chosen organisation, remove it.
        if (dataOrg !== chosenOrganisation && chosenOrganisation !== '') {
            $("#debuginfo").append('<div>Removed ' + $this.val() + '</div>');
            $this.remove();
        }
    });
});