JSFiddle - React, Tailwind, and code Playground

by DuncanMack

HTML

<!DOCTYPE HTML>
<html>
    <head><title>Testing</title></head>
    <body>
        <div style="float:left">
        <select size="10" name="testList" multiple="multiple" id="testList_box" style="width:250px; float:left; margin-right:20px;">
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
            <option value="4">Fourth</option>
            <option value="5">Fifth</option>
        </select>
        </div>
        <div id="columnSpecList">
            <div><input type="radio" id="input1" name="spec" value="1" />
                <label for="input1">Select First</label></div>
            <div><input type="radio" id="input2" name="spec" value="1,3" />
                <label for="input2">Select First and Third</label></div>
            <div><input type="radio" id="input3" name="spec" value="1,3,5" />
                <label for="input3">Select First, Third and Fifth</label></div>
        </div>
    </body>
</html>

JavaScript

$(document).ready(function () {
        var columnList = $('#testList_box');
        var columnSpecList = $('#columnSpecList');
        var columnSpecOptions = $('input', columnSpecList);

        $(columnSpecOptions).click(function () {
            var optionsToSelect = $(this).val().split(',');
         
            // clear the list
            $(':selected', columnList).removeProp('selected');

            // select desired columns
            $(optionsToSelect).each(function (index, value) {
                $('[value=' + value + ']', columnList).prop('selected', 'true');
            });
        });

        $(columnList).on(
            {
                click: deselectSpec,
                change: deselectSpec
            }
        );

        // simulate "click" of the selected option to load the initial values
        var itemToClick = $(":checked", columnSpecList);
        $(itemToClick).click();

        function deselectSpec() {
            $(columnSpecOptions).removeProp('checked');
        }
    });