JSFiddle - React, Tailwind, and code Playground

by ghdekker

HTML

<select id="lb" style="width:130px; height:150px;" multiple="multiple">  
    <option value="0">item number 0</option>
    <option value="1">item number 1</option>
    <option value="2">item number 2</option>
    <option value="3">item number 3</option>
    <option value="4">item number 4</option>
    <option value="5">item number 5</option>
    <option value="6">item number 6</option>
    <option value="7">item number 7</option>
    <option value="8">item number 8</option>
    <option value="9">item number 9</option>
    <option value="10" group="somegroup">item number 10</option>
    <option value="11">item number 11</option>
    <option value="12">item number 12</option>
    <option value="13">item number 13</option>
    <option value="14">item number 14</option>
    <option value="15">item number 15</option>
    <option value="16">item number 16</option>
    <option value="17">item number 17</option>
    <option value="18">item number 18</option>
    <option value="19">item number 19</option>
    <option value="20">item number 20</option>
    <option value="21">item number 21</option>
    <option value="22">item number 22</option>
    <option value="23">item number 23</option>
    <option value="24">item number 24</option>
    <option value="25">item number 25</option>
    <option value="26">item number 26</option>
    <option value="27">item number 27</option>
    <option value="28">item number 28</option>
    <option value="29">item number 29</option>
    <option value="30">item number 30</option>
    <option value="31">item number 31</option>
    <option value="32">item number 32</option>
    <option value="33">item number 33</option>
    <option value="34">item number 34</option>
    <option value="35">item number 35</option>
    <option value="36">item number 36</option>
    <option value="37">item number 37</option>
    <option value="38">item number 38</option>
    <option value="39">item number 39</option>
    <option value="40">item number...

JavaScript

$('#lb').change(function() {
    $('#lb option:selected').each(function() {
        var groupName = $(this).attr('group');
        if (groupName !== undefined) {
            $('#lb option[group=' + groupName + ']').each(function() {
                this.selected = true;
            });
        }

    });
});